Applying highlighting to only certain parts of the tree

1

Is there a good way to apply syntax highlighting to only certain parts of the tree? Specifically, I have a Markdown document where I would like to highlight code inside fenced code blocks but not the actual Markdown itself.

I’m currently using a workaround like this

EditorView.baseTheme({
  '[class^=ͼ]:not(pre [class^=ͼ])': {
    all: 'unset'
  }
})

but it seems a bit inefficient/hacky as the highlight spans are still created; the CSS just ensures their styles don’t get applied. (The pre tag is added by a separate decoration around all fenced code blocks.)

2

You could define a highlighter with a scope method, that only returns true when the scope isn’t Markdown, and use that in your editor.

1 Like
3

Ah I see, coming from HightlightStyle’s define, I didn’t realize scope was a function in the interface.

But suppose the fenced code block is labelled as Markdown — is there any way to distinguish the nested tree from the root tree? I tried using the node props, but those appear to be identical.

4

No, the tree type will be the same for the top and for nested markdown blocks. Why would you not want to highlight the top, but highlight inner markdown?

5

I’m implementing a live preview (à la Obsidian and Typora) which renders the outer Markdown such that highlighting would interfere with the live preview’s styles, but should treat the inner Markdown like any other code and highlight it.