Target empty lines in code blocks in markdown

1

Using Codemirror v6 and the markdown mode, I see that empty lines look like

<div class="cm-line"><br></div>

regardless of whether that line is in normal mode or inside fenced code block (```).

In contrast, a non-empty line inside a code block look like

<div class="cm-line"><span class="cm-code">hello</span></div>

As you can see, this line content is wrapped in .cm-code.

I need to be able to target also the empty lines inside fenced code blocks. I style the “code” lines differently from non-code lines in the editor. How can I achieve this?

2

Syntax highlighting only targets text, not lines. You’ll have to write a custom extension that creates line decorations based on the syntax tree to do what you’re looking for.

3

Ok, I’m not experienced enough with the framework to know where to start - could you give some pointers or references of similar implementations that I could start off from?

4

The decoration examples would be a good start, specifically this one for an example of using the syntax tree for decorations, and this one for creating line decorations.