Search code examples
javascripthtmlvimsyntax-highlightingvim-syntax-highlighting

HTML syntax highlighting in javascript strings in vim

I don't know if this is possible/sensible, but I was curious to know if I can have my strings in javascript files have html highlighting. I discovered that strings in php could have SQL syntax highlighting, so I believe it is possible.

But, I don't know vim-scripting, so any help on this appreciated.

I am using the Better Javascript syntax.

PS: If there could be an option to turn it on and off while editing a js file, that would be wonderful

Thanks

Solution

  • Yes, it's possible if you don't mind some syntax file hacking. First you need to include the HTML syntax file from within the Javascript syntax file -- see :help syn-include for info on that; second you need to declare that HTML syntax can be found inside of certain elements (i.e. strings). Third, if you want to have the option of enabling and disabling it, you can make those commands dependent on a global variable, and write some mappings that set or unset the variable and then reload the syntax file.

    For examples on how inclusion works, take a look at syntax/html.vim (which includes the Javascript and CSS syntax files), syntax/perl.vim (which includes the POD syntax file), or php.vim (which includes SQL syntax highlighting in strings, conditional on a global ariable).

    Edit: did some work on actually making this happen in my copy.

    In the head of syntax/javascript.vim, just below syn case ignore, add

    syn include @javaScriptHTML syntax/html.vim
unlet b:current_syntax
syn spell default " HTML enables spell-checking globally, turn it off

    Then add @javaScriptHTML to the contained= lists for javaScriptStringD and javaScriptStringS.

    Finally you have to edit syntax/html.vim to prevent it from trying to include syntax/javascript.vim if it was loaded from javascript: find the line that reads

    if main_syntax != 'java' || exists("java_javascript")

    and change it to

    if main_syntax != 'javascript' && ( main_syntax != 'java' || exists("java_javascript")