Make Vim correctly highlight script type="text/html"

Question

How can I get Vim to correctly syntax-highlight in a situation such as this (used, e.g. with Knockout templates):

<script type="text/html" id="my-template">
  <!-- This should be rendered as HTML -->
  <div>Some template</div>
</script>

<script>
  //This should be rendered as Javascript
  var x = function() { return 3; }
</script>

The solution given here involves editing Vim's internal syntax file, which seems wrong, and it specifically looks for "text/javascript" which is no longer needed in <script> tags.

I assume the solution is some sort of syntax plugin I can keep in my .vim directory but am not familiar enough with Vim's syntax internals to figure it out.

(Note that this question and answer don't apply as I'm not using Ruby on Rails.)

Well, you will obviously need to edit the HTML syntax script and/or the JavaScript syntax script as they are quite old. Try something and come back with a real actionable question when you are stuck. — romainl
– romainl, Commented Jun 20, 2014 at 6:42
Right, see where I "am not familiar enough with Vim's syntax internals to figure it out". A starting point would be helpful, at the very least. — Dan
– Dan, Commented Jun 20, 2014 at 16:38

JHannes · Accepted Answer · 2015-04-09 08:45:58Z

2

Maybe this will help you: https://coderwall.com/p/vgk5-q/make-vim-play-nice-with-html-templates-inside-script-tags.

In case the link above is broken one day - put the following code into ~/.vim/after/syntax/html.vim:

unlet b:current_syntax
syn include @HTML $VIMRUNTIME/syntax/html.vim
syn region htmlTemplate start=+<script [^>]*type *=[^>]*text/template[^>]*>+
\                       end=+</script>+me=s-1 keepend
\                       contains=@HTML,htmlScriptTag,@htmlPreproc

Somebody should write a plugin for that! ;)

answered Apr 9, 2015 at 8:45

JHannes

1,4832 gold badges10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Jorgensen Over a year ago

Of course, to be an closer fit for the OP's case, replace [^>]*text/template[^>] with [^>]*text/html[^>].

buff · Accepted Answer · 2014-06-28 11:28:53Z

1

First copy the vim's internal html syntax file to $HOME/.vim/syntax/html.vim so that you only change the behaviour for yourself not globally.

Then find the line starting syn region javaScript and replace it with two lines

syn region  script_notype start=+<script>+ keepend end=+</script>+me=s-1 contains=@htmlJavaScript,htmlCssStyleComment,htmlScriptTag,@htmlPreproc
syn region  script_jstype start=+<script[^>]*type="text/javascript"[^>]*>+ keepend end=+</script>+me=s-1 contains=@htmlJavaScript,htmlCssStyleComment,htmlScriptTag,@htmlPreproc

The first line is for plain <script> tab, the second for <script type="text/javascript">.

However, this won't cover a situation with <script> tag without type attribute having other attributes. This case should get javascript syntax but won't. I guess this is a minor problem.

answered Jun 28, 2014 at 11:28

buff

2,05310 silver badges17 bronze badges

3 Comments

Dan Over a year ago

This works for <script type="text/html"> but <script type="text/javascript"> no longer formats correctly.

buff Over a year ago

@Dan: Can you double check if you have set it up the same? For me, it works properly even for <script type="text/javascript">.

buff Over a year ago

I'm sorry, I'm afraid I can't solve this. It works on my machine perfectly and doesn't on yours... Try to play with it for a while, I believe you'll be able to get it working.

Collectives™ on Stack Overflow

Make Vim correctly highlight script type="text/html"

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related