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>
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.
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 class="cm-formatting cm-formatting-header cm-formatting-header-1">#</span>
(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).