Is there a way to add additional, child spans for markdown output? (useful for additional styling)

1

I am looking to more heavily style the text within CodeMirror, specifically when using Markdown.

Currently, if I were to write:
# This is a heading

It will generate an output of:
<span class="cm-header cm-header-1"># This is a heading</span>

My question is, is there a way to easily have it output as:
<span class="cm-header cm-header-1"><span class="cm-mark">#</span> This is a heading</span>

As you can see, there is an additional child span with a class of cm-mark that I can style specifically with CSS. Optimally, this would happen with any such markdown, ex:

<span class="cm-strong"><span class="cm-mark">**</span>this is a bold statement<span class="cm-mark">**</span></span>

Thanks!

2

If you want to extend the markdown mode to (when its highlightFormatting option is on) style such hash signs separately, I’d accept such a patch.

3

With highlightFormatting on, markdown mode already styles header hashes (and just about every significant punctuation):

<span class="cm-header cm-header-1 cm-formatting cm-formatting-header cm-formatting-header-1">#</span>
<span class="cm-header cm-header-1">Title</span>

@rmf The spans won’t be nested - CM always closes spans and opens a new span.
But there is a way to get some nesting: style names starting with “line-” are lifted (without cm- prefix) to the surrounding <pre> tag for the whole line.
It’s pretty easy to wrap the mode to prepend line-cm- to some names (see https://github.com/cben/mathdown/commit/2197d63b18e425cfe481f9cb4f9a6bf76624ac82) resulting in:

<pre class=" cm-header cm-header-1 ">
  <span>
    <span class="cm-formatting cm-formatting-header cm-formatting-header-1">#</span>
    Title
  </span>
</pre>

(not sure if the outer class-less <span> is always there)

Styling the line instead spans is essential in some cases (e.g. line padding was my motivation).

But of course this trick only makes sense for whole-line constructs (such as headers).

1 Like