Toggle "Show Invisibles"?

[djbpitt]

Is it possible to toggle "Show Invisibles" on and off on a per-use (on for some <pre> or <code> elements and off for others in the same page) basis? I see that this level of control is possible for line numbering, but I don't find any documentation for "Show Invisibles". Thank you!

[karenrebecag]

There's no per-element option for Show Invisibles like there is for Line Numbers, but you can get the same result with CSS alone.

The plugin works in two parts (plugins/show-invisibles/ on master, released as 1.30.0):

1. JS: a before-highlight hook adds tab, cr, lf, crlf and space tokens to the grammar. The grammar is mutated once and shared, so every block in that language gets those <span class="token space"> etc. There's no per-element check in the JS.
2. CSS: the visible glyphs (·, ⇥, ␊…) are only ::before pseudo-elements on those spans. The actual whitespace characters are untouched.

Because the display is pure CSS, you can make it opt-in per block by switching the pseudo-elements off everywhere except where you add a class:

pre:not(.show-invisibles) .token.tab:not(:empty)::before,
pre:not(.show-invisibles) .token.cr::before,
pre:not(.show-invisibles) .token.lf::before,
pre:not(.show-invisibles) .token.crlf::before,
pre:not(.show-invisibles) .token.space::before {
  content: none;
}

<pre class="language-js show-invisibles"><code>...</code></pre>  <!-- shows invisibles -->
<pre class="language-js"><code>...</code></pre>                  <!-- doesn't -->

These selectors are more specific than the plugin's (for example .token.space:before), so they win regardless of stylesheet order. If you'd rather have invisibles on by default and opt out, flip it to pre.hide-invisibles .token...::before.

Since it's only a class, you can also toggle it live without re-highlighting:

button.addEventListener('click', () => pre.classList.toggle('show-invisibles'))

Copy and paste isn't affected either way, because the glyphs are generated content and not part of the text.