How to apply styling only to markdown content

v6
1

I’m currently exploring how to apply styling to Markdown content using codemirror/lang-markdown.

I have a Markdown document like this:

#    header
~~stroke~~

My goal is to apply specific styles to elements within this Markdown content. Specifically, I want to:

  1. Make only the “header” text larger.
  2. Add strike-through styling to only the “stroke” text.

Here is the code I’ve tried: Try CodeMirror

In my code, I defined a style that overwrites and removes all existing decorations on Mark nodes.

{ tag: t.processingInstruction, textDecoration: 'none', fontSize: '100%' },

However, I am wondering if there is a simpler way to selectively style Markdown nodes without affecting other content. In the example above, the font size is applied to “spaces” within the header. I’d like to have the style apply to the header text only, ignoring leading and trailing spaces (like Github Flavored Markdown). Is this achievable?

I think the Markdown parser itself may need to be modified. Specifically, creating a custom parser that includes nodes like HeaderLeadSpace, HeaderContent, HeaderTrailingSpace, and StrikethroughContent, which would allow more precise styling. However, I’d like to explore a lower-cost solution if one exists.

If necessary, I’m willing to write a custom parser, but I’m interested in any insights or alternative approaches that the community might have.

2

The scope option to HighlightStyle can be used to make a style apply only to a given language. But not styling spaces is not something that the highlight system can do.

1 Like