How can I set different colors to inline code and code block?

1

Hi guys,

I’m using lezer tags to highlight markdown text

import { tags } from "@lezer/highlight";

For the code I’m setting color to tags.monospace, it supports both of inline code and codeblock.

{ tag: tags.monospace, color: #"ff0000" },

I wonder if that’s possible to set different colors for them?

Thanks!

2

You’d have to assign one of them an additional highlighting tag, so that you can target that. Something like this.

3

Thanks, it’s working

I’m trying to set the background color for the code block

{tag: tags.special(tags.monospace), color: “red”, backgroundColor: “blue”}

However only the line background is changed. Is that possible to change the background color of the whole code block? Even including the head and tail markers (```)

4

Not with syntax highlighting. That only provides inline styling. It would be possible to write a separate extension that, based on the parse tree, styles some lines with a background. (Do make sure to use a partially-transparent background, or you’ll hide the selection on those lines.)

5

Will give it a try.

Many thanks!