Suggestion: Only syntax highlight range

It’s not uncommon to see presentations or code images where most of the code is de-coloured / not syntax highlighted, and only a specific range or set of ranges are highlighted.

I’ve worked out a possible solution.

CodeMirror supports marking a range of text with a class. https://codemirror.net/doc/manual.html#api_marker

The CSS can then be added to make ALL text grey (or a themes comment colour?), only keeping the syntax highlighting for a specific section.

The CSS would look something like…

:not(.colourise) > span {
    color: gray !important;
}

Applying the class of colourise to a presentation span, then results in the attached screenshot result.

[mfix22]

This is a lesser known feature, but we already have support for highlighting/selecting lines. You have to turn on “Line numbers” in the settings, but then by clicking on the line numbers you can (de)select certain lines to highlight them. If you click, and then Shift-click another line, that will batch select a group of lines.

We also want to use opacity in order to ensure that deselection always looks good, no matter what the theme is.

[Relequestual]

I wish I had time @mfix22! Appreciate you working on this!