diff --git a/README.md b/README.md
index efde56a..c8e19fd 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,19 @@ Sublime Text Syntax highlighting for single-file [Vue.js](http://vuejs.org) comp
### Enabling JSX Highlighting
-The `
+```
+
+If `lang="jsx"` doesn't work, you can try the alternative.
1. Install and set [Babel javascript highlighting package](https://packagecontrol.io/packages/Babel), which supports JSX, as your default JS highlighting.
diff --git a/Vue Component.sublime-syntax b/Vue Component.sublime-syntax
index abd5245..cfc00b7 100644
--- a/Vue Component.sublime-syntax
+++ b/Vue Component.sublime-syntax
@@ -131,6 +131,48 @@ contexts:
- include: script-lang-decider
script-lang-decider:
+ - match: (?i)(?=jsx{{unquoted_attribute_break}}|\'jsx\'|"jsx")
+ set:
+ - - meta_scope: meta.tag.script.begin.html
+ - match: '>'
+ scope: punctuation.definition.tag.end.html
+ set:
+ - match: '{{script_content_begin}}'
+ embed_scope: source.jsx.embedded.html
+ escape_captures:
+ 1: source.jsx.embedded.html
+ 2: comment.block.html punctuation.definition.comment.end.html
+ 3: source.jsx.embedded.html
+ 4: comment.block.html punctuation.definition.comment.end.html
+ captures:
+ 1: comment.block.html punctuation.definition.comment.begin.html
+ pop: 1
+ embed: scope:source.jsx
+ escape: '{{script_content_end}}'
+ - include: script-common
+ - tag-generic-attribute-meta
+ - tag-generic-attribute-value
+ - match: (?i)(?=tsx{{unquoted_attribute_break}}|\'tsx\'|"tsx")
+ set:
+ - - meta_scope: meta.tag.script.begin.html
+ - match: '>'
+ scope: punctuation.definition.tag.end.html
+ set:
+ - match: '{{script_content_begin}}'
+ embed_scope: source.tsx.embedded.html
+ escape_captures:
+ 1: source.tsx.embedded.html
+ 2: comment.block.html punctuation.definition.comment.end.html
+ 3: source.tsx.embedded.html
+ 4: comment.block.html punctuation.definition.comment.end.html
+ captures:
+ 1: comment.block.html punctuation.definition.comment.begin.html
+ pop: 1
+ embed: scope:source.tsx
+ escape: '{{script_content_end}}'
+ - include: script-common
+ - tag-generic-attribute-meta
+ - tag-generic-attribute-value
- match: (?i)(?=coffee{{unquoted_attribute_break}}|\'coffee\'|"coffee")
set:
- - meta_scope: meta.tag.script.begin.html
diff --git a/Vue Component.sublime-syntax.yaml-macros b/Vue Component.sublime-syntax.yaml-macros
index 6daadfb..60de705 100644
--- a/Vue Component.sublime-syntax.yaml-macros
+++ b/Vue Component.sublime-syntax.yaml-macros
@@ -132,6 +132,8 @@ contexts:
- include: script-lang-decider
script-lang-decider:
+ - !script_language [ jsx, source.jsx ]
+ - !script_language [ tsx, source.tsx ]
- !script_language [ coffee, source.coffee ]
- !script_language [ livescript, source.livescript ]
- !script_language [ ts, source.ts ]
diff --git a/samples/jsx.vue b/samples/jsx.vue
index 6a17d73..d7ad626 100644
--- a/samples/jsx.vue
+++ b/samples/jsx.vue
@@ -1,6 +1,6 @@
-