In html eruby files, I would like to highlight the <% ... %> text in dark green only when it is inside double quotes. I.e. in in this example:

enter image description here

I want it dark green instead of white.

I know that <% ... %> and <%= ... %> are respectively defined as erubyBlock and erubyExpression in terms of syntax highlighting. I could highlight them with hi erubyBlock guifg=... etc, but I would like to do so only when they are inside double quotes (which have the htmlString syntax definition).

So basically I would like to do something like hi htmlString>erubyBlock guifg=... (if this syntax existed).

I have tried looking at the Vim help but could not find anything. Is there a way to do this?

1 Answer 1


Ok, this is probably not the best solution because it is pretty invasive. But, it's all I could come up with so I will give it to you.

One thing we can do is basically manually do the highlighting ourselves. So we could easily do something like:

   syn match quotedErubyBlock '"<%.\{-}%>"'

This will define a new highlighting section that matches "<% followed by any text, followed by %>". This should get us what we want, but the problem with this is that it will only affect strings that are not contained in any other syntax region. Clearly in your example this is going to show up in an htmlTag region, and so we need to get a bit more complicated. What I've come up with is the following:

autocmd BufReadPost *.html syn match quotedErubyBlock '"<%.\{-}%>"' contained
autocmd BufReadPost *.html syn region  htmlTag start=+<[^/]+   end=+>+ fold contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent,htmlCssDefinition,quotedErubyBlock,@htmlPreproc,@htmlArgCluster
autocmd BufReadPost *.html hi link quotedErubyBlock Constant

Ok, that's a lot to swallow. Let's go through it.

  1. The first line defines our new highlighting section quotedErubyBlock and also specifies that it will be contained in some other region.
  2. The next line is the invasive part. I've stolen this line from vim's html.vim file. Basically we are redefining what an htmlTag is. The only thing I changed is I added our quotedErubyBlock to the contains= list. This way vim can "see" our new highlighting section within an htmlTag block.
  3. This line just tells vim what color to highlight our new section with. I've put Constant because I think that will give you what you are looking for, but feel free to change it to whatever works best for you.

As a last note, the autocmd BufReadPost *.html is an autocommand that will do our highlighting whenever a file is loaded with the extension html. I'm not very familiar with eruby, so you may need to change this if that is not the proper filetype.

See the vimwiki's page on creating your own syntax file for more information.

Hope this helps.

  • 2
    Thanks for the details explanation! However it seems to color only the quotes (see the blue color in i.imgur.com/ZrLkN6H.png), but not the content which remains white. Don't sweat it though, I think I am starting to get accustomed with the default VIM white colors Apr 21, 2016 at 4:39
  • 2
    Couple of thoughts: 1. You can piggy-back on an existing cluster. Note that the htmlTag syntax definition includes two clusters (@htmlPreproc, and @htmlArgCluster). So you could do :syntax cluster htmlPreproc add=quotedErubyBlock (which makes sense in a way = the eruby part will be handled by pre-processor of sorts). Then you won't have to modify the htmlTag definition.
    – muru
    Apr 21, 2016 at 16:18
  • 1
    2. Use a ~/.vim/after/syntax/eruby.vim instead of autocmds. It's neater (and I suppose, more efficient, since not all HTML files need be eruby files, and you only need this when using the eruby syntax).
    – muru
    Apr 21, 2016 at 16:19
  • 1
    1. Good point! That's much less invasive. 2. I'm not familiar this this method, but you sound like you know what you're talking about. :P
    – Tumbler41
    Apr 21, 2016 at 16:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.