Surround whitespace (invisible characters) with tags

[loikein]

Is there an existing issue for this?

• I have searched the existing issues

What problem does this feature solve?

When using Chroma highlight on Hugo websites, sometimes I would like to highlight the existence of invisible characters like space, tab, and CR/LF (at the end of each line before the last one). I see that there already exists .chroma .w class, and methods regarding TextWhitespace, but the whitespaces themselves are not marked-up.

The goal here is to have the tags with classes, so that style (especially pseudo elements) could be applied easily.

I reckon this is technically doable with Shortcodes and/or JavaScript, but the solution would be very messy and could easily miss some corner cases, so I am trying my luck here to see if you would consider adding this as a feature. Thanks a lot.

What feature do you propose?

Minimal example of what Chroma currently gives:

<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="line"><span class="cl">
	<span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>
	hello world
	<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span>
</code></pre></div>

What I would like to propose: .ws for space, .wt for tab, .wr for return / CRLF. (Just an example, the specific names of the classes are not important.)

<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="line"><span class="cl">
	<span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>
	hello<span class="ws"> </span>world
	<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span>
</code></pre></div>

[mashaal]

This opens up more styling and formatting options as well. Would be a great addition!