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.

Questions that seem related: http://stackoverflow.com/questions/519753 and http://stackoverflow.com/questions/1471715 — Brian M. Hunt, Feb 02 '11 at 12:45

score 14 · Accepted Answer · edited May 23 '17 at 12:30

14

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.

edited May 23 '17 at 12:30

Community

1
1

answered Mar 03 '11 at 15:45

Maxy-B

2,772
1
25
33

Great suggestion! I'm giving this a whirl today/this weekend. Will let you know the results. – Brian M. Hunt Mar 04 '11 at 13:09
1

@Brian: I just realized -- the above code should work by itself, but _don't_ put in `~/.vim/after/syntax/yaml.vim`, or you'll get an infinite loop. You just need to have it invoked somehow when you open a yaml file... there should be a number of ways to do it. – Maxy-B Mar 04 '11 at 20:10
I'm not sure what you mean by "invoked somehow when you open a yaml file" – Ziggy Aug 27 '12 at 21:26
3

This is brilliant! Thanks for posting. :-D For a minor improvement, I find I can collapse the `let/unlet` pairs into a single `unlet!` (with the exclamation-mark). – Kris Jenkins Aug 29 '12 at 11:38
A generic version: http://vim.wikia.com/wiki/Different_syntax_highlighting_within_regions_of_a_file – tam5 Jan 08 '18 at 04:32

Xavier T. · Answer 2 · 2011-01-28T15:14:57.777

1

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

edited Jan 28 '11 at 15:14

answered Jan 28 '11 at 15:08

Xavier T.

40,509
10
68
97

Nick Knowlson · Answer 3 · 2011-02-01T21:07:50.503

1

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.

edited Feb 01 '11 at 21:07

answered Feb 01 '11 at 20:28

Nick Knowlson

7,185
6
47
63

I tried this, too, but to no avail! Thanks for the answer, though. – Brian M. Hunt Feb 02 '11 at 04:09

score 0 · Answer 4 · answered Jun 24 '11 at 10:43

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

VIM syntax highlighting of html nested in yaml

4 Answers4

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

Linked