In markdown how to color only list bullets?

Lezer
1

I highlight various part of the markdown text defining a HighlightStyle:

         const myHighlightStyle = HighlightStyle.define([
             {tag: tags.monospace,        color: "#CCFF33"},
              . . .
         ]);

It works beautifully, but I have a question regarding lists. If I do nothing, the list bullet or number appears dark gray and the text in my text color. If I add to the above list the entry:

            {tag: tags.list,             color: "#DBDB59"},

the whole list appears in color. Perfect, but how to change only the color of the bullets (in my case “-”) or the list numbers like “2.”?

Thanks!
mario

2

Those do not get assigned a separate highlight tag by default, so you’d have to add a rule for that to your markdown configuration. Something like…

markdown({
  // ...
  extensions: {props: styleProps({
    ListMark: yourCustomTag
  })}
})

You can then style that tag, in order to affect only list markers.

1 Like
3

Thanks! But Where is styleProps defined?
I given up on the list markers, but now I need to change the color of ``` fences. I’m able to change color of the inside code using HighlightStyle and tags.monospace. But the fences remains very dark. Or they have a special tag value? Inside the markdown parser there is a FencedCode node type that could be of interest.
Thanks!

4

I mistyped—that should be styleTags comes from @lezer/highlight. The ``` syntax is parsed as "CodeMark" (but so are the single backticks around inline code).

5

It works! Thanks.
If could be useful to someone, here is an excerpt from my editor setup:

import {tags, styleTags, Tag} from "@lezer/highlight";

const myTag = Tag.define();

const myHighlightStyle = HighlightStyle.define([

	{tag: tags.comment,          color: "#16A004", fontStyle: "italic"},
	{tag: tags.emphasis,         color: "#66D9EF", fontStyle: "italic"},
	{tag: tags.strong,           color: "#66D9EF", fontStyle: "bold"},
	. . .
	{tag: myTag,        		 color: "#FF0000", fontStyle: "bold"},
]);

editor = new EditorView({
	state: EditorState.create({
		doc: "",
		extensions: [
		    . . .
			markdown({base: markdownLanguage,
					  extensions: {props: [styleTags({CodeMark: myTag})]}}),
			syntaxHighlighting(myHighlightStyle),
		]
	}),
	parent: dom // Retrieved elsewhere
});

Et voilĂ , the ``` are bold red. Everything is logical when you understand where lo look in the documentation.
Thanks again
mario

1 Like
6

Only a small observation. If you look at node_modules\@lezer\markdown\dist\index.js line 1714 you see:

    "HeaderMark HardBreak QuoteMark ListMark LinkMark EmphasisMark CodeMark": tags.processingInstruction,

that I interpret, maybe wrongly, that CodeMark has already a tag of tags.processingInstruction. But if I associate to this tag a highlight style, it is not applied.
Confused.
mario

7

Can you set up a self-contained script showing this?