Home Download Buy Blog Forum Support

Custom <script> tag in HTML file

Custom <script> tag in HTML file

Postby kendagriff on Wed Aug 24, 2011 4:27 pm

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?
kendagriff
 
Posts: 2
Joined: Wed Aug 24, 2011 4:23 pm

Re: Custom <script> tag in HTML file

Postby digiduck on Wed Aug 24, 2011 4:47 pm

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.
digiduck
 
Posts: 19
Joined: Mon Aug 08, 2011 1:27 pm

Re: Custom <script> tag in HTML file

Postby kendagriff on Wed Aug 24, 2011 4:59 pm

Thanks!

I checked the file you recommended and, basically, commented out what I thought was relevant, and it worked.
kendagriff
 
Posts: 2
Joined: Wed Aug 24, 2011 4:23 pm

Re: Custom <script> tag in HTML file

Postby tjmehta on Fri Nov 04, 2011 10:07 pm

kendagriff, can you post exactly what did?

thanks ahead
tjmehta
 
Posts: 3
Joined: Thu Oct 20, 2011 3:28 pm

Re: Custom <script> tag in HTML file

Postby pyparadigm on Mon Jan 16, 2012 3:29 pm

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.
pyparadigm
 
Posts: 23
Joined: Thu Aug 04, 2011 8:15 am

Re: Custom <script> tag in HTML file

Postby cutcopypaste on Thu Jan 03, 2013 6:37 pm

Nice! Gonna give that a shot.. would be cool if there was a less 'hacky' way of doing this.
cutcopypaste
 
Posts: 41
Joined: Tue Feb 21, 2012 9:43 pm

Re: Custom <script> tag in HTML file

Postby Kirkman on Thu Mar 21, 2013 8:03 pm

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?
Kirkman
 
Posts: 3
Joined: Fri Jul 20, 2012 2:27 am

Re: Custom <script> tag in HTML file

Postby skuroda on Thu Mar 21, 2013 8:38 pm

Kirkman wrote: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
skuroda
 
Posts: 685
Joined: Fri Oct 05, 2012 8:11 am

Re: Custom <script> tag in HTML file

Postby iamntz on Fri Mar 22, 2013 6:32 am

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.
iamntz
 
Posts: 915
Joined: Fri Apr 29, 2011 8:52 am
Location: Romania

Re: Custom <script> tag in HTML file

Postby Kirkman on Tue Apr 02, 2013 5:43 am

That worked iamntz. Many thanks.
Kirkman
 
Posts: 3
Joined: Fri Jul 20, 2012 2:27 am


Return to Technical Support

Who is online

Users browsing this forum: Yahoo [Bot] and 41 guests