VIM syntax highlighting of html nested in yaml

Question

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.

Answer 1

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.

Answer 2

You could try to add the following in your .vimrc:

autocmd BufRead,BufNewFile *.yaml setfiletype html.yaml

A yaml file will be considered to be both of type yaml and html and both syntax color scheme should be applied but I don't really know how conflicts between the two schemes are dealt with...

Answer 3

It looks like you want to move the start pattern to the beginning of the next line:

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

More details:

I'm on WinXP, but I saw almost the same behavior that you described.

When in a file with filetype yaml, after calling TextEnableCodeSnip I didn't see a change until I moved the start pattern down the the beginning of the next line. I was able to see the syntax highlighting work in a file with no filetype though, so this still a chance this won't work for you.

Answer 4

I used Maxy-B's solution. My code, in particular, is a bit different so I thought to post it for posterity:

~/.vim/after/syntax/yaml.vim

let b:current_syntax = ''
unlet b:current_syntax
syntax include @HTML syntax/html.vim

syntax region htmlCode start=#^html:#hs=e+1 end=+^\w+he=s-1,me=s-1
    \ contains=@HTML

let b:current_syntax = ''
unlet b:current_syntax
syntax include @TEX syntax/tex.vim

syntax region texCode start=#^tex:#hs=e+1 end=+^\w+he=s-1,me=s-1
    \ contains=@TEX

This highlights the top-level YAML nodes html and tex with those respective types of code. It's not very dynamic, but it suits my purpose and this may serve as helpful guideline for someone doing something similar. It'll highlight the following as expected (or at least, as I expect it), for example:

regular:  # yaml
   - yaml # yaml
html: 
    <b>hello</b> # html
tex:
    \begin{document} # tex
    \end{document} # tex
the-end: may be necessary # yaml