In markdown how to color only list bullets?

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

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

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!

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).

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

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

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