CODEWITHSUNDEEP
javascripthtmlvimsyntax-highlighting
Dan
Dan

Reputation: 2804

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

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.)

Upvotes: 5

Views: 762

Answers (2)

JHannes
JHannes

Reputation: 1483

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! ;)

Upvotes: 2

buff
buff

Reputation: 2053

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.

Upvotes: 1

Related Questions