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?
You can use the Lezer parser system (as used in CodeMirror) to highlight code without an editor. See here for an example.
Is there a basic way to integrate that Lezer parsing with
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?
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
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
myHighlightStyle.module to load the CSS associated with it.