Syntax Highlighting for HTML inside x-template script tags in Sublime Text 3

Question

I recently upgraded to the newest build of sublime text (Version 3.1.1 Build 3176) and have lost syntax highlighting for html contained inside tags.

For context, I'm using scripts of type x-template to create Vue.js components inside a file saved with a .html extension.

My file looks something like this:

<!-- comp.html -->
<script type="text/x-template" id="comp-template">
    <div id="comp-template>
        <h2> {{ componentTitle }} </h2>

    </div>
</script>

Previous versions of Sublime Text highlighted the html within those script tags by default, but now it no longer seems to be working. What is the best way to get sublime to once again recognize the HTML within the x-template script tags?

Answer 1

EDIT: there is now a package for that, called "Vue Syntax Highlight"

---

Here is a way to do it:

1. Download the HTML.sublime-syntax from Sublime Github repository: https://raw.githubusercontent.com/sublimehq/Packages/f10135941f5aeaa3af5906850f7dc296e51b1172/HTML/HTML.sublime-syntax
2. Change line 3 from name: HTML to name: HTML-Vue
3. Change line 83 from : - match: '(<)((?i:script))\\b' to - match: '(<)((?i:script))\\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript).*)))'
4. Rename the file to HTML-Vue.sublime-syntax
5. Save the file to user local settings (for Windows it's %AppData%\\Sublime Text 3\\Packages\\User\\HTML-Vue.sublime-syntax )
6. Restart SublimeText and select View > Syntax > Open all with current extension as… > HTML-Vue

Answer 2

I have the same issue as you. As a temporary workaround to enable syntax highlight for <script type="text/x-template">...</script> :

1. Install an older version, for example Build 3143 (Windows: https://download.sublimetext.com/Sublime Text Build 3143 x64 Setup.exe )
2. Backup C:\\Program Files\\Sublime Text 3\\Packages\\HTML.sublime-package
3. Update to the latest version
4. Restore the backup

FYI I reported your issue into Sublime Forum.

Answer 3

Here's an approach that doesn't require a new syntax mode and is a simpler edit:

1. Copy the HTML.sublime-package file out of the Packages directory bundled with Sublime Text 3.

2. It's actually a zip file so unzip the contents into the user packages area as ..../User/Packages/HTML .

3. Edit the HTML.sublime-syntax file within the HTML directory and in the script-type-decider block change:

    - match: (?i)(?=text/html(?!{{unquoted_attribute_value}})|'text/html'|"text/html")

to

    - match: (?i)(?=text/html(?!{{unquoted_attribute_value}})|'text/html'|"text/html"|"text/x-template")

(Or substitute whatever template type you are using.)

Then restart Sublime Text.

Note, a drawback of this approach is that the HTML package will no longer be the latest when Sublime Text updates. So, you may want to perform these steps again periodically.