Syntax Highlighting in CodeMirror v6 without the editor functionality?

Will this work, or is it for CodeMirror v5? GitHub - craftzdog/react-codemirror-runmode: Syntax highlighting for react, utilizing CodeMirror's parser

I am looking to syntax highlight hundreds of blocks of code on a page, and creating editors for each will be too much performance-wise I think. I saw some threads discussing syntax highlighting being implemented for v6 (like this? Server-side highlighting with CodeMirror 6 · GitHub), but wasn’t sure what the status/plan was.

What is the status, is it possible? If not yet, what would it take?

Thank you!

You can use the Lezer parser system (as used in CodeMirror) to highlight code without an editor. See here for an example.

1 Like

Is there a basic way to integrate that Lezer parsing with EditorView.theme?

Not really—editor themes style parts of the editor, not the syntax.

Ok interesting thanks for the example at Lezer Highlighting Example

So I am using react-codemirror/themes/dracula/src/index.ts at master · uiwjs/react-codemirror · GitHub which is for React.js codemirror, its theme is a thin wrapper around EditorView.theme like seen here react-codemirror/themes/theme/src/index.tsx at 042b6c9a7d64b669219f2425a0fc2877ecf05a32 · uiwjs/react-codemirror · GitHub

How can I reuse the span highlight colors from that theme, in as much a way as possible? If you’re saying you can’t use the EditorView.theme, I don’t need all that extra stuff like gutter highlight and cursor color, I just need the string is purple, booleans are green type stuff. Can I get that and reuse it somehow? What kind of work would that take, do you have a brief example?

If I can’t reuse, how do I rewrite that theme’s colors to use in this example you provided?

Thank you.

That theme seems to use some crude ‘helper’ function from @uiw/codemirror-themes that packages up the highlighter in an opaque editor extension value, which indeed prevents you from using it directly as an argument to highlightCode.

I get that, I use the implementation of that createTheme function directly, don’t use createTheme as it prevents direct access. But how do I do the syntax highlighting using the internals of that in this case?

If you have a CodeMirror-style HighlightStyle, you can pass that as highlighter to highlightCode, and use StyleModule.mount on myHighlightStyle.module to load the CSS associated with it.