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 @@ -