Add tsx (TypeScript + JSX) support

This uses the same rules as JavaScript's JSX support. Fixes highlightjs#1155
rhigdon · Jan 31, 2019 · 4934b55 · 4934b55
1 parent bb711fb
commit 4934b55
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/AUTHORS.en.txt b/AUTHORS.en.txt
@@ -274,3 +274,4 @@ Contributors:
 - Alejandro Isaza <[email protected]>
 - Laurent Voullemier <[email protected]>
 - Sean T. Allen <[email protected]>
+- Drew DeVault <[email protected]>
diff --git a/CHANGES.md b/CHANGES.md
@@ -6,6 +6,14 @@ New styles:
 
 Improvements:
 
+## Version 9.14.2
+
+Improvements:
+
+- Added tsx support to *TypeScript* via [Drew Devault][]
+
+[Drew DeVault]: https://github.com/SirCmpwn
+
 ## Version 9.14.1
 
 New languages:
@@ -64,7 +72,7 @@ Improvements:
 [Antoine Boisier-Michaud]: https://github.com/Aboisier
 [Alejandro Isaza]: https://github.com/alejandro-isaza
 
-## Version 9.13.0
+## Version 9.14.2
 
 New languages:
 

diff --git a/src/languages/typescript.js b/src/languages/typescript.js
@@ -60,7 +60,7 @@ function(hljs) {
   };
 
   return {
-    aliases: ['ts'],
+    aliases: ['ts', 'tsx'],
     keywords: KEYWORDS,
     contains: [
       {
@@ -125,6 +125,20 @@ function(hljs) {
                 ]
               }
             ]
+          },
+          { // E4X / JSX
+            begin: /</, end: /(\/\w+|\w+\/)>/,
+            subLanguage: 'xml',
+            contains: [
+              {begin: /<\w+\s*\/>/, skip: true},
+              {
+                begin: /<\w+/, end: /(\/\w+|\w+\/)>/, skip: true,
+                contains: [
+                  {begin: /<\w+\s*\/>/, skip: true},
+                  'self'
+                ]
+              }
+            ]
           }
         ],
         relevance: 0

diff --git a/test/detect/typescript/default.txt b/test/detect/typescript/default.txt
@@ -2,6 +2,7 @@ class MyClass {
   public static myValue: string;
   constructor(init: string) {
     this.myValue = init;
+    return <div className="test">jsx syntax</div>;
   }
 }
 import fs = require("fs");

diff --git a/test/markup/typescript/jsx.expect.txt b/test/markup/typescript/jsx.expect.txt
@@ -33,9 +33,10 @@
         <span class="hljs-keyword">return</span> state;
     }
     <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (node.kind === SyntaxKind.ModuleDeclaration) {
-        <span class="hljs-keyword">return</span> getModuleInstanceState((&lt;ModuleDeclaration&gt;node).body);
+        <span class="hljs-keyword">return</span> getModuleInstanceState((<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ModuleDeclaration</span>&gt;</span>node).body);
     }
-    <span class="hljs-keyword">else</span> {
-        <span class="hljs-keyword">return</span> ModuleInstanceState.Instantiated;
+    else {
+        return ModuleInstanceState.Instantiated;
     }
 }
+</span>