vue: Improve syntax highlighting (#11482)
d1y
created
close #8989
Before:
<img width="690" alt="image"
src="https://github.com/zed-industries/zed/assets/45585937/02b6f703-d54a-4e08-82f8-4ed624f37a64">
After:
<img width="571" alt="image"
src="https://github.com/zed-industries/zed/assets/45585937/9abd39d0-c4e8-426e-b0d8-62e26090332a">
Release Notes:
- Improve vue highlighting
Change summary
extensions/vue/languages/vue/highlights.scm | 4
extensions/vue/languages/vue/injections.scm | 57 ++++++++++++++++++++++
2 files changed, 57 insertions(+), 4 deletions(-)
Detailed changes
@@ -7,8 +7,8 @@
((tag_name) @type
(#match? @type "^[A-Z]"))
-((directive_name) @keyword
- (#match? @keyword "^v-"))
+(directive_name) @keyword
+(directive_argument) @constant
(start_tag) @tag
(end_tag) @tag
@@ -1,7 +1,60 @@
-(script_element
- (raw_text) @content
+; <script>
+((script_element
+ (start_tag) @_no_lang
+ (raw_text) @content)
+ (#not-match? @_no_lang "lang=")
(#set! "language" "javascript"))
+; <script lang="js">
+((script_element
+ (start_tag
+ (attribute
+ (attribute_name) @_lang
+ (quoted_attribute_value
+ (attribute_value) @_js)))
+ (raw_text) @content)
+ (#eq? @_lang "lang")
+ (#eq? @_js "js")
+ (#set! "language" "javascript"))
+
+; <script lang="ts">
+((script_element
+ (start_tag
+ (attribute
+ (attribute_name) @_lang
+ (quoted_attribute_value
+ (attribute_value) @_ts)))
+ (raw_text) @content)
+ (#eq? @_lang "lang")
+ (#eq? @_ts "ts")
+ (#set! "language" "typescript"))
+
+; <script lang="tsx">
+; <script lang="jsx">
+; Zed built-in tsx, we mark it as tsx ^:)
+(script_element
+ (start_tag
+ (attribute
+ (attribute_name) @_attr
+ (quoted_attribute_value
+ (attribute_value) @language)))
+ (#eq? @_attr "lang")
+ (#any-of? @language "tsx" "jsx")
+ (raw_text) @content)
+
+
+; {{ }}
+((interpolation
+ (raw_text) @content)
+ (#set! "language" "typescript"))
+
+; v-
+(directive_attribute
+ (quoted_attribute_value
+ (attribute_value) @content
+ (#set! "language" "typescript")))
+
+; TODO: support less/sass/scss
(style_element
(raw_text) @content
(#set! "language" "css"))