Custom <script> tag in HTML file

[kendagriff]

I frequently use HTML templates within <script> tags in HTML files (Handlebars.js, Mustache, ICANHAZ.js, etc.), for client-side rendering. Here's an example:

<script id="my-sample-tmpl" type="text/x-handlebars-template">
<h1>Hello, World</h1>
</script>

How can I transform a <script> tag with a specific "type" attribute into showing the HTML syntax (and HTML snippets), instead of treating it like a JavaScript tag?

[digiduck]

I believe you will need to edit the HTML grammar (tmLanguage) file and add additional scopes to do this. Unfortunately I'm not familiar enough with this to offer more details though I'm sure someone else can.

[kendagriff]

Thanks!

I checked the file you recommended and, basically, commented out what I thought was relevant, and it worked.

[tjmehta]

kendagriff, can you post exactly what did?

thanks ahead

[pyparadigm]

If anyone still wonders, you can compare this to your HTML tmlanguage file,

http://pastebin.com/irTLDzKC

You basically just comment out 284-381ish. I don't use inline JS so didn't both to have them check for "type" attribute which would be true fix for these client side templates.

[cutcopypaste]

Nice! Gonna give that a shot.. would be cool if there was a less 'hacky' way of doing this.

[Kirkman]

This solution is almost ideal, except that it disallows inline javascript.

I'm hoping to find a solution that allows inline javascript, inline handlebars templates, and proper syntax coloring for each.

Seems like the way to accomplish this might be to edit the regex in line 286 such that it excludes any script that with an opening tag that contains type="text/x-handlebars-template".

Does anyone know how to do that?

[skuroda]

This solution is almost ideal, except that it disallows inline javascript.

I'm hoping to find a solution that allows inline javascript, inline handlebars templates, and proper syntax coloring for each.

Seems like the way to accomplish this might be to edit the regex in line 286 such that it excludes any script that with an opening tag that contains type="text/x-handlebars-template".

Does anyone know how to do that?

I did something similar with graphviz. Don't want to retype the explanation, so I'll link you to the StackOverflow where I did already They wanted to highlight embedded html in an AngularJS directive, but what they wanted is the same.

The short version is I think it's possible, you would just have to create the appropriate begin regex as you had mentioned and include the appropriate source.

http://stackoverflow.com/questions/1543 ... 2#15441612

[iamntz]

Here is how i did it:
Edit HTML.tmLanguage and do the following change: https://gist.github.com/iamntz/5070840

You can change text/template to whatever you would like (text/handlebar or whatever). This will NOT affect normal javascript highlight.

[Kirkman]

That worked iamntz. Many thanks.