Conceal HTML span and highlight content

Question

I am currently writing some Anki cards in NeoVim. Anki supports HTML and I can therefore write cards in the following format.

Forumlate the <span class="highlight">Central Limit Theorem</span>.

For this, I am using specific Anki shortcuts to include the HTML tags. However, with an increasing amount of tags in the text it gets unreadable.

I would like to conceal the tags and instead highlight the contents. When moving the cursor over the content, I would like the tags to show.

How can I achieve this with NeoVim's conceal feature?

Answer 1

Something like the following works:

syntax region ankiHighlight matchgroup=ankiConceal start='\V<span class="highlight">' end='\V<\/span>' oneline concealends
hi ankiHighlight cterm=underline gui=underline
setlocal conceallevel=2

This creates a syntax region matching the span tags as the start and end. It sets a separate matchgroup to highlight the tags themselves, which is required if you'd like to conceal only the tags. Then it uses the concealends attribute to indicate that they should be concealed.

The matches for the start and end tag are quite literal (using \V for very literal non-magic regexp mode), you can adapt the regular expressions to matches that make sense for you. I also added the oneline attribute, which requires the whole match on a single line, and help prevent a start hit without a matching end from running through the end of the file.

See :help :syn-region, :help :syn-concealends, :help :syn-oneline, :help /\V, etc.

I highlighted the ankiHighlight region with an underline. You can adapt that setting to use colors or whatever you like. You can also set a highlight for ankiConceal if you want to set colors or attributes when the span tags are displayed.

I set 'conceallevel' to 2, which is typically what you'd want to have them effectively concealed. (See :help 'conceallevel' for options 1 and 3, also :help 'concealcursor' for behavior when the cursor is on that line.)

Note that "conceal" might look particularly odd when you have long blocks of text concealed, as is the case here. For instance, when :set wrap is in effect, the lines will be wrapped before the tags are concealed, so it might look that lines are wrapping much earlier than the right margin, so you might want to keep that in mind.