Example on Creating a Custom Tag for Markdown?

[Puddinglord]

Greetings!

We just started using CodeMirror and so far it’s been exactly what we’re looking for. I am working on a Markdown editor and I love that using tags from @lezer/highlight we can style markdown syntax live!

Something I noticed is that the ``` (back-tick used to inline code) doesn’t seem to be among the tags that I can style.

Is there an example on how one would go about creating a custom tag for something like that? I could then use that example to define more tags like the triple back-tick used for code-blocks.

Thanks!

[marijn]

You should be able to do something like

const codeMarkTag = Tag.define()

markdown({
  extensions: {
    props: [styleTags({CodeMark: codeMarkTag})]
  }
})

And then style that tag in a highlighter. See also this thread.

[Puddinglord]

I’ve gotten a little further! Thanks for your help

the blue and pink are the test styles I added

I added the custom tags and I can see in my Highlighter object that the new styles are being read by the highlighter which is great.

The odd part is that back-ticks don’t seem to cause the editor to wrap the words inside of the back-ticks in a <span>.

For example, when you make something bold the bolded word shows up in a <span> element inside of the cm-line div. For the back-ticks it doesn’t.

bold does have a span element

back-ticks don’t

Any thoughts?

[marijn]

The spans are created when decorations are added for those syntactic elements by the highlighter. If they are not, either the style tag wasn’t added to the syntax tree nodes, or the tag wasn’t styled by the highlighter.

[Puddinglord]

Aha! I got what I’m looking for! Thanks a bunch.

The final piece to the puzzle is styling Block Quotes. It looks like I can target the QuoteMark tag and that’s the > that starts the Quote Block. Unlike CodeBlocks, however, there doesn’t seem to be an enumerated value for something like QuoteInfo or QuoteText. Is that missing from the spec or am I missing something for targeting the actual text of a Block Quote?

[marijn]

You can target the whole quote (Blockquote nodes) and then override with more specific tags on the marks.

[mdbraber]

Would you have an example how to do this?