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