(javascript) support jsx fragments (#2333)

* (javascript) support jsx fragments
highlightjs · Dec 30, 2019 · 701184e · 701184e
1 parent b661885
commit 701184e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 6 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -14,7 +14,8 @@ Core Changes:
 
 Language Improvements:
 
-- (ini) support arrays, clean up grammar (#2335) [Josh Goebel][]
+- (javascript) support jsx fragments (#2333) [Josh Goebel][]
+- (ini) support TOML arrays, clean up grammar (#2335) [Josh Goebel][]
 - (vbnet) add nameof operator to the keywords (#2329) [Youssef Victor][]
 - (stan) updated with improved coverage of language keywords and patterns. (#1829) [Jeffrey Arnold][]
 

diff --git a/src/languages/javascript.js b/src/languages/javascript.js
@@ -6,8 +6,14 @@ Website: https://developer.mozilla.org/en-US/docs/Web/JavaScript
 */
 
 function(hljs) {
-  var TAG_START = /<[A-Za-z0-9\\._:-]+/;
-  var TAG_FINISH = /\/[A-Za-z0-9\\._:-]+>|\/>/;
+  var FRAGMENT = {
+    begin: '<>',
+    end: '</>'
+  };
+  var XML_TAG = {
+    begin: /<[A-Za-z0-9\\._:-]+/,
+    end: /\/[A-Za-z0-9\\._:-]+>|\/>/
+  };
   var IDENT_RE = '[A-Za-z$_][0-9A-Za-z$_]*';
   var KEYWORDS = {
     keyword:
@@ -190,15 +196,18 @@ function(hljs) {
             skip: true,
           },
           { // JSX
-            begin: TAG_START, end: TAG_FINISH,
+            variants: [
+              { begin: FRAGMENT.begin, end: FRAGMENT.end },
+              { begin: XML_TAG.begin, end: XML_TAG.end }
+            ],
             subLanguage: 'xml',
             contains: [
               {
-                begin: TAG_START, end: TAG_FINISH, skip: true,
+                begin: XML_TAG.begin, end: XML_TAG.end, skip: true,
                 contains: ['self']
               }
             ]
-          }
+          },
         ],
         relevance: 0
       },

diff --git a/test/markup/javascript/jsx-fragment.expect.txt b/test/markup/javascript/jsx-fragment.expect.txt
@@ -0,0 +1,10 @@
+<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Columns</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
+  render() {
+    <span class="hljs-keyword">return</span> (
+      <span class="xml"><span class="hljs-tag">&lt;&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Hello<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>World<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+      <span class="hljs-tag">&lt;/&gt;</span></span>
+    );
+  }
+}
diff --git a/test/markup/javascript/jsx-fragment.txt b/test/markup/javascript/jsx-fragment.txt
@@ -0,0 +1,10 @@
+class Columns extends React.Component {
+  render() {
+    return (
+      <>
+        <td>Hello</td>
+        <td>World</td>
+      </>
+    );
+  }
+}