diff --git a/.gitignore b/.gitignore index fc2bb20..e43b0f9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ .DS_Store -sample.vue diff --git a/LICENSE b/LICENSE index 954778d..f8fc693 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2013-2014 Yuxi Evan You +Copyright (c) 2013-2016 Evan You Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index dfd0447..0ab3250 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,26 @@ # Vue Syntax Highlight +**Note:** The `master` branch hosts the `tmLanguage` based implementation that is distributed to Sublime Text build < 3153. It is also used to power GitHub's syntax highlight of `*.vue` files in [linguist](https://github.com/github/linguist). + +For a newer implementation of the syntax that is distributed to build >=3153, See the [new](https://github.com/vuejs/vue-syntax-highlight/tree/new) branch. + +--- + Sublime Text Syntax highlighting for single-file [Vue.js](http://vuejs.org) components (enabled by [vue-loader](https://github.com/vuejs/vue-loader) or [vueify](https://github.com/vuejs/vueify)). -![screenshot](https://cloud.githubusercontent.com/assets/499550/11458853/99ed23aa-9696-11e5-9bf6-43c706487aee.png) +![screenshot](https://raw.githubusercontent.com/vuejs/vue-syntax-highlight/new/samples/screenshot.png) ### Install - Via Package Control: search for `Vue Syntax Highlight`. - Manual: clone this repo into your Sublime `Packages` folder. -**NOTE:** You still need to install corresponding packages for pre-processors (e.g. Jade, SASS, CoffeeScript) to get proper syntax highlighting for them. +**Additional Installation Requirements:** In order to get proper syntax highlighting for pre-processors (e.g. Jade, SASS, CoffeeScript) you will also need to install the corresponding packages for each of them. + +### Enabling JSX Highlighting + +The ` + + diff --git a/samples/langs.vue b/samples/langs.vue new file mode 100644 index 0000000..b96fc7c --- /dev/null +++ b/samples/langs.vue @@ -0,0 +1,41 @@ + + + + + + + + + + + diff --git a/vue.YAML-tmLanguage b/vue.YAML-tmLanguage index 7e5e2c0..3c8888f 100644 --- a/vue.YAML-tmLanguage +++ b/vue.YAML-tmLanguage @@ -6,6 +6,8 @@ fileTypes: [vue] uuid: 5512c10d-4cc5-434c-b8fc-53b912f55ab3 patterns: +- include: '#vue-interpolations' + - name: meta.tag.any.html begin: (<)([a-zA-Z0-9:-]++)(?=[^>]*>) beginCaptures: @@ -61,8 +63,24 @@ patterns: - name: invalid.illegal.bad-comments-or-CDATA.html match: (\s*)(?!--|>)\S(\s*) +- name: text.slm.embedded.html + begin: (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])slm\1?) + end: ()(?:\s*\n)? + captures: + '1': {name: punctuation.definition.tag.begin.html} + '2': {name: entity.name.tag.style.html} + '3': {name: punctuation.definition.tag.html} + patterns: + - include: '#tag-stuff' + - begin: (>) + beginCaptures: + '1': {name: punctuation.definition.tag.end.html} + end: (?=]*lang="jade(?:\?[^"]*)?") + begin: (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])jade\1?) end: ()(?:\s*\n)? captures: '1': {name: punctuation.definition.tag.begin.html} @@ -77,8 +95,25 @@ patterns: patterns: - include: text.jade +- name: text.pug.embedded.html + begin: (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])pug\1?) + end: ()(?:\s*\n)? + captures: + '1': {name: punctuation.definition.tag.begin.html} + '2': {name: entity.name.tag.style.html} + '3': {name: punctuation.definition.tag.html} + patterns: + - include: '#tag-stuff' + - begin: (>) + beginCaptures: + '1': {name: punctuation.definition.tag.end.html} + end: (?=]*lang="stylus(?:\?[^"]*)?") + begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])stylus\1?) end: ()(?:\s*\n)? captures: '1': {name: punctuation.definition.tag.begin.html} @@ -93,8 +128,24 @@ patterns: patterns: - include: source.stylus +- name: source.postcss.embedded.html + begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])postcss\1?) + end: ()(?:\s*\n)? + captures: + '1': {name: punctuation.definition.tag.begin.html} + '2': {name: entity.name.tag.style.html} + '3': {name: punctuation.definition.tag.html} + patterns: + - include: '#tag-stuff' + - begin: (>) + beginCaptures: + '1': {name: punctuation.definition.tag.end.html} + end: (?=]*lang="(?:s(a|c)ss)(?:\?[^"]*)?") + begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])sass\1?) end: ()(?:\s*\n)? captures: '1': {name: punctuation.definition.tag.begin.html} @@ -109,8 +160,24 @@ patterns: patterns: - include: source.sass +- name: source.scss.embedded.html + begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])scss\1?) + end: ()(?:\s*\n)? + captures: + '1': {name: punctuation.definition.tag.begin.html} + '2': {name: entity.name.tag.style.html} + '3': {name: punctuation.definition.tag.html} + patterns: + - include: '#tag-stuff' + - begin: (>) + beginCaptures: + '1': {name: punctuation.definition.tag.end.html} + end: (?=]*lang="less(?:\?[^"]*)?") + begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])less\1?) end: ()(?:\s*\n)? captures: '1': {name: punctuation.definition.tag.begin.html} @@ -123,7 +190,7 @@ patterns: '1': {name: punctuation.definition.tag.end.html} end: (?=]*/>) @@ -141,8 +208,26 @@ patterns: patterns: - include: source.css +- name: source.ts.embedded.html + begin: (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])ts\1?) + beginCaptures: + '1': {name: punctuation.definition.tag.begin.html} + '2': {name: entity.name.tag.script.html} + end: (?<=)(?:\s*\n)? + endCaptures: + '2': {name: punctuation.definition.tag.html} + patterns: + - include: '#tag-stuff' + - begin: (?) + end: (]*lang="coffee(?:\?[^"]*)?") + begin: (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])coffee\1?) beginCaptures: '1': {name: punctuation.definition.tag.begin.html} '2': {name: entity.name.tag.script.html} @@ -159,8 +244,26 @@ patterns: patterns: - include: source.coffee +- name: source.livescript.embedded.html + begin: (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])livescript\1?) + beginCaptures: + '1': {name: punctuation.definition.tag.begin.html} + '2': {name: entity.name.tag.script.html} + end: (?<=)(?:\s*\n)? + endCaptures: + '2': {name: punctuation.definition.tag.html} + patterns: + - include: '#tag-stuff' + - begin: (?) + end: (]*/>) + begin: (<)((?i:script))\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript|babel|ecmascript).*))) beginCaptures: '1': {name: punctuation.definition.tag.begin.html} '2': {name: entity.name.tag.script.html} @@ -239,6 +342,48 @@ patterns: match: < repository: + vue-interpolations: + patterns: + - name: expression.embbeded.vue + begin: \{\{\{? + end: \}\}\}? + beginCaptures: + '0': {name: punctuation.definition.generic.begin.html} + endCaptures: + '0': {name: punctuation.definition.generic.end.html} + patterns: + - include: source.js + + vue-directives: + name: meta.directive.vue + begin: (?:\b(v-)|(:|@))([a-zA-Z\-]+)(?:\:([a-zA-Z\-]+))?(?:\.([a-zA-Z\-]+))*\s*(=) + end: (?<='|") + captures: + '1': {name: entity.other.attribute-name.html} + '2': {name: punctuation.separator.key-value.html} + '3': {name: entity.other.attribute-name.html} + '4': {name: entity.other.attribute-name.html} + '5': {name: entity.other.attribute-name.html} + '6': {name: punctuation.separator.key-value.html} + patterns: + - name: source.directive.vue + begin: '"' + beginCaptures: + '0': {name: punctuation.definition.string.begin.html} + end: '"' + endCaptures: + '0': {name: punctuation.definition.string.end.html} + patterns: + - include: source.js + - name: source.directive.vue + begin: '''' + beginCaptures: + '0': {name: punctuation.definition.string.begin.html} + end: '''' + endCaptures: + '0': {name: punctuation.definition.string.end.html} + patterns: + - include: source.js entities: patterns: @@ -259,6 +404,7 @@ repository: endCaptures: '0': {name: punctuation.definition.string.end.html} patterns: + - include: '#vue-interpolations' - include: '#entities' string-single-quoted: @@ -270,6 +416,7 @@ repository: endCaptures: '0': {name: punctuation.definition.string.end.html} patterns: + - include: '#vue-interpolations' - include: '#entities' tag-generic-attribute: @@ -293,6 +440,7 @@ repository: endCaptures: '0': {name: punctuation.definition.string.end.html} patterns: + - include: '#vue-interpolations' - include: '#entities' - name: string.quoted.single.html contentName: meta.toc-list.id.html @@ -303,14 +451,17 @@ repository: endCaptures: '0': {name: punctuation.definition.string.end.html} patterns: + - include: '#vue-interpolations' - include: '#entities' tag-stuff: patterns: + - include: '#vue-directives' - include: '#tag-id-attribute' - include: '#tag-generic-attribute' - include: '#string-double-quoted' - include: '#string-single-quoted' + foldingStartMarker: |- (?x) (<(?i:head|body|table|thead|tbody|tfoot|tr|div|select|fieldset|style|script|ul|ol|li|form|dl)\b.*?> @@ -320,6 +471,7 @@ foldingStartMarker: |- |\{\{?(if|foreach|capture|literal|foreach|php|section|strip) |\{\s*($|\?>\s*$|//|/\*(.*\*/\s*$|(?!.*?\*/))) ) + foldingStopMarker: |- (?x) ( @@ -329,4 +481,5 @@ foldingStopMarker: |- |\{\{?/(if|foreach|capture|literal|foreach|php|section|strip) |^[^{]*\} ) + keyEquivalent: ^~H diff --git a/vue.sublime-settings b/vue.sublime-settings index 9822417..35a04cc 100644 --- a/vue.sublime-settings +++ b/vue.sublime-settings @@ -1,6 +1,8 @@ { "extensions": [ - "vue" + "vue", + "we", + "wpy" ] } diff --git a/vue.tmLanguage b/vue.tmLanguage index ebecdfb..a8bdbeb 100644 --- a/vue.tmLanguage +++ b/vue.tmLanguage @@ -30,6 +30,10 @@ Vue Component patterns + + include + #vue-interpolations + begin (<)([a-zA-Z0-9:-]++)(?=[^>]*></\2>) @@ -207,7 +211,61 @@ begin - (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang="jade(?:\?[^"]*)?") + (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])slm\1?) + captures + + 1 + + name + punctuation.definition.tag.begin.html + + 2 + + name + entity.name.tag.style.html + + 3 + + name + punctuation.definition.tag.html + + + end + (</)((?i:template))(>)(?:\s*\n)? + name + text.slm.embedded.html + patterns + + + include + #tag-stuff + + + begin + (>) + beginCaptures + + 1 + + name + punctuation.definition.tag.end.html + + + end + (?=</(?i:template)) + patterns + + + include + text.slm + + + + + + + begin + (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])jade\1?) captures 1 @@ -261,7 +319,61 @@ begin - (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="stylus(?:\?[^"]*)?") + (?:^\s+)?(<)((?i:template))\b(?=[^>]*lang=(['"])pug\1?) + captures + + 1 + + name + punctuation.definition.tag.begin.html + + 2 + + name + entity.name.tag.style.html + + 3 + + name + punctuation.definition.tag.html + + + end + (</)((?i:template))(>)(?:\s*\n)? + name + text.pug.embedded.html + patterns + + + include + #tag-stuff + + + begin + (>) + beginCaptures + + 1 + + name + punctuation.definition.tag.end.html + + + end + (?=</(?i:template)) + patterns + + + include + text.pug + + + + + + + begin + (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])stylus\1?) captures 1 @@ -315,7 +427,61 @@ begin - (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="(?:s(a|c)ss)(?:\?[^"]*)?") + (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])postcss\1?) + captures + + 1 + + name + punctuation.definition.tag.begin.html + + 2 + + name + entity.name.tag.style.html + + 3 + + name + punctuation.definition.tag.html + + + end + (</)((?i:style))(>)(?:\s*\n)? + name + source.postcss.embedded.html + patterns + + + include + #tag-stuff + + + begin + (>) + beginCaptures + + 1 + + name + punctuation.definition.tag.end.html + + + end + (?=</(?i:style)) + patterns + + + include + source.postcss + + + + + + + begin + (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])sass\1?) captures 1 @@ -369,7 +535,61 @@ begin - (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="less(?:\?[^"]*)?") + (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])scss\1?) + captures + + 1 + + name + punctuation.definition.tag.begin.html + + 2 + + name + entity.name.tag.style.html + + 3 + + name + punctuation.definition.tag.html + + + end + (</)((?i:style))(>)(?:\s*\n)? + name + source.scss.embedded.html + patterns + + + include + #tag-stuff + + + begin + (>) + beginCaptures + + 1 + + name + punctuation.definition.tag.end.html + + + end + (?=</(?i:style)) + patterns + + + include + source.css.scss + + + + + + + begin + (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])less\1?) captures 1 @@ -415,7 +635,7 @@ include - source.less + source.css.less @@ -477,7 +697,69 @@ begin - (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang="coffee(?:\?[^"]*)?") + (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])ts\1?) + beginCaptures + + 1 + + name + punctuation.definition.tag.begin.html + + 2 + + name + entity.name.tag.script.html + + + end + (?<=</(script|SCRIPT))(>)(?:\s*\n)? + endCaptures + + 2 + + name + punctuation.definition.tag.html + + + name + source.ts.embedded.html + patterns + + + include + #tag-stuff + + + begin + (?<!</(?:script|SCRIPT))(>) + captures + + 1 + + name + punctuation.definition.tag.begin.html + + 2 + + name + entity.name.tag.script.html + + + end + (</)((?i:script)) + patterns + + + include + source.ts + + + + + + + begin + (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])coffee\1?) beginCaptures 1 @@ -539,7 +821,69 @@ begin - (?:^\s+)?(<)((?i:script))\b(?![^>]*/>) + (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])livescript\1?) + beginCaptures + + 1 + + name + punctuation.definition.tag.begin.html + + 2 + + name + entity.name.tag.script.html + + + end + (?<=</(script|SCRIPT))(>)(?:\s*\n)? + endCaptures + + 2 + + name + punctuation.definition.tag.html + + + name + source.livescript.embedded.html + patterns + + + include + #tag-stuff + + + begin + (?<!</(?:script|SCRIPT))(>) + captures + + 1 + + name + punctuation.definition.tag.begin.html + + 2 + + name + entity.name.tag.script.html + + + end + (</)((?i:script)) + patterns + + + include + source.livescript + + + + + + + begin + (<)((?i:script))\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript|babel|ecmascript).*))) beginCaptures 1 @@ -849,6 +1193,10 @@ string.quoted.double.html patterns + + include + #vue-interpolations + include #entities @@ -881,6 +1229,10 @@ string.quoted.single.html patterns + + include + #vue-interpolations + include #entities @@ -944,6 +1296,10 @@ string.quoted.double.html patterns + + include + #vue-interpolations + include #entities @@ -977,6 +1333,10 @@ string.quoted.single.html patterns + + include + #vue-interpolations + include #entities @@ -989,6 +1349,10 @@ patterns + + include + #vue-directives + include #tag-id-attribute @@ -1007,6 +1371,150 @@ + vue-directives + + begin + (?:\b(v-)|(:|@))([a-zA-Z\-]+)(?:\:([a-zA-Z\-]+))?(?:\.([a-zA-Z\-]+))*\s*(=) + captures + + 1 + + name + entity.other.attribute-name.html + + 2 + + name + punctuation.separator.key-value.html + + 3 + + name + entity.other.attribute-name.html + + 4 + + name + entity.other.attribute-name.html + + 5 + + name + entity.other.attribute-name.html + + 6 + + name + punctuation.separator.key-value.html + + + end + (?<='|") + name + meta.directive.vue + patterns + + + begin + " + beginCaptures + + 0 + + name + punctuation.definition.string.begin.html + + + end + " + endCaptures + + 0 + + name + punctuation.definition.string.end.html + + + name + source.directive.vue + patterns + + + include + source.js + + + + + begin + ' + beginCaptures + + 0 + + name + punctuation.definition.string.begin.html + + + end + ' + endCaptures + + 0 + + name + punctuation.definition.string.end.html + + + name + source.directive.vue + patterns + + + include + source.js + + + + + + vue-interpolations + + patterns + + + begin + \{\{\{? + beginCaptures + + 0 + + name + punctuation.definition.generic.begin.html + + + end + \}\}\}? + endCaptures + + 0 + + name + punctuation.definition.generic.end.html + + + name + expression.embbeded.vue + patterns + + + include + source.js + + + + + scopeName text.html.vue pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy