Make Sublime Text 2 treat script tag templates as HTML

Using templates to render HTML in Javascript is great; but unfortunately Sublime Text 2 treats templates embedded in script tags as Javascript (which means syntax highlighting and completions don't work correctly). Luckily, this can easily be fixed by tweaking Sublime's HTML language file.

Here's what you need to do:

  1. Go to Sublime's Packages directory (or the use the Preferences -> Browse Packages… menu item).

  2. Open the HTML/HTML.tmLanguage file.

  3. Change line 286 from:

    <string>(?:^\s+)?(&lt;)((?i:script))\b(?![^&gt;]*/&gt;)</string>

    to:

    <string>(?:^\s+)?(&lt;)((?i:script))\b(?![^&gt;]*/&gt;)(?!.*type=["']text/template['"])</string>

Now any script tags with a type of text/template will be treated as HTML:

<script type="text/template">
    <h1>{{title}}</h1>
</script>

GitHub Comments

  1. samtgarson

    In Sublime Text 3, this line is at 308. Worth doing a find just make sure.

  2. tp

    I have filed this as a bug with ST, so that all users may enjoy this fix in a future version: http://sublimetext.userecho.com/topic/453232-/

  3. bonsak

    Thanks @Rowno. Great tip. This was driving me crazy.

  4. jrtitus

    @Rowno - Thanks for posting this. You rock.

  5. sciascia

    Hi There,

    Does anyone know how to fix this issue in ST3 on Mac OS10.9?

    There are no HTML.tmLanguage files if I go Preferences -> Browse Packages….

    If I Show package contents on the Sublime Text app then go Contents –> MacOS –> Packages I can see a file called HTML.sublime-package but it looks to be some sort of compressed archive that can't be edited.

    If I search the system (including system files) for HTML.tmLanguage all that's returned is a cache file named HTML.tmLanguage.cache and a python file named sublimezenplugin.py.

    Any pointers in the right direction would be much appreciated.

    Cheers

    Ben

  6. Rowno

    @sciascia The default packages are no longer extracted into the user Packages directory in Sublime Text 3.

    Here's what you need to do:

    1. Copy Packages/HTML.sublime-package file from the installation directory and decompress it as a .zip file (rename it to HTML.sublime-package.zip).
    2. Copy the HTML.tmLanguage file inside to HTML/HTML.tmLanguage in your user Packages directory (ie: Preferences -> Browse Packages…).
    3. Edit the HTML.tmLanguage file to make the required change at line 308.
    4. Profit. ✨

    Maybe I should write a followup blog post. 😉

  7. sciascia

    @Rowno Cheers, thanks heaps for the reply and your help.

    I'd just installed SublimeLinter which seemed to install it's own version of HTML.tmLanguage and fixed the issue.

    BTW I was having this issue with straight js script tags (with no type declared) but have now noticed that js syntax highlighting doesn't work. I guess it's an either/or situation - yes?

  8. Rowno

    @sciascia No, both are working fine for me.

  9. ghost

    couldn't get none of these working for me in macos sierra.. ended up setting up the syntax as xml :-)

add comment via GitHub