I’d like to share a shiki integration for codemirror here.
repository: codemirror-shiki
preview: https://codemirror-shiki.vercel.app/
With this integration, we can use 200+ languages and 60 themes from shiki easily.
Here are some screenshots:
2 Likes
Sounds too good to be true.
What’s the tradeoff? (Other than installing shiki (i’m already using shiki for (non-editable) highlighting)
Does this convert to lezer?
I spend so much time trying to figure out lezer 
What’s the tradeoff?
The shiki integration only handles syntax highlighting, while lezer does a lot more than just syntax highlighting, lezer is the foundation of many intellisense features. And also lezer is super performant with its incremental parsing, and its parser system is interruptible and resumable, so it won’t freeze the UI.
Does this convert to lezer?
No.
From my experience, I usually use this integration for syntax highlighting, and combines with @codemirror/lang-* packages or language service to provide intellisense features.
1 Like
How do you do this? It seems the lang packages also provide a highlighter which “wins” when also using the shiki highlighter.
lezer highlighting is enabled by syntaxHighlighting(which is exported from @codemirror/language), so simply don’t add it in your codemirror extensions, add shiki integration instead.
I can see the utility of this for languages that don’t have an existing CodeMirror mode. But for a language that has a @codemirror/lang-* package, which is already parsing the code, why are you running Shiki? To align with a highlighting style used elsewhere on the page?
Glad to hear your thoughts, marijn. Yes, the primary scenario is to align the highlighting style, as some non-editable scene already uses shiki as its highlighter. And meanwhile, someone may prefer existing VSCode themes, but migrating VSCode themes to lezer is a lot of work. Shiki handles that for us(shiki is powered by textmate grammar, same engine as VSCode, it’s easy to ship an exisiting VSCode theme with shiki).
Admittedly, shiki isn’t the most performant option here with @codemirror/lang-* packages, since lezer has already parsed the syntax tree. The better approach may be use shiki together with @codemirror/lsp-client (as the language service runs separately in a web worker or in server side). However, many languages don’t have suitable language services available, so in most cases we still rely on codemirror/lang-* packages.