Search code examples
syntax-highlightingvimvim-syntax-highlighting

VIM syntax highlighting of html nested in yaml


Given a yaml file that contains html, like this:

template        : |+ 
    <div>Hello, world</div>

Is it possible in Vim (version 7.3.087) to highlight the html portion with html syntax highlighting?

I found the post Different syntax highlighting within regions of a file, which seems to have exactly the concept I was looking for, but I cannot get it to work as expected with yaml. I'd expect to be able to do the following (as suggested in the link):

" .vimrc
" include the code from the above link
call TextEnableCodeSnip('html' ,'#{{{html' ,'#html}}}', 'SpecialComment')

Then have the yaml as, for example:

 template        : |+  #{{{html
    <div>Hello, world</div>
 #html}}}

Unfortunately this does not work as expected i.e. the html code remains entirely highlighted with yaml. I've also noted that with my configuration (MacVim 55), this doesn't work in text files either.

I'd be grateful for your thoughts or suggestions, and thank you for reading.


Solution

  • check out my related question: Trouble using Vim's syn-include and syn-region to embed syntax highlighting. There I am trying to embed Python within TeX, but I think the solution might work for your case, too.

    I think you want to do something like this:

    let b:current_syntax = ''
    unlet b:current_syntax
    runtime! syntax/yaml.vim
    
    let b:current_syntax = ''
    unlet b:current_syntax
    syntax include @YaML syntax/yaml.vim
    
    let b:current_syntax = ''
    unlet b:current_syntax
    syntax include @HTML syntax/html.vim
    syntax region htmlEmbedded matchgroup=Snip start='#{{{html' end='#html}}}' containedin=@YaML contains=@HTML
    
    hi link Snip SpecialComment
    let b:current_syntax = 'yaml.html'
    

    The block with the runtime! command might be unnecessary if your YaML is already highlighted.