# Syntax Highlighting in CodeMirror v6 without the editor functionality?
**URL:** https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823
**Category:** Uncategorized
**Created:** [February 6, 2024, 9:47pm UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823 "2024-02-06T21:47:01Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@lancejpollard](https://discuss.codemirror.net/u/lancejpollard)
#### Post date: [February 6, 2024, 9:47pm UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823/1 "2024-02-06T21:47:02Z")
Will this work, or is it for CodeMirror v5? [GitHub - craftzdog/react-codemirror-runmode: Syntax highlighting for react, utilizing CodeMirror's parser](https://github.com/craftzdog/react-codemirror-runmode/tree/master)
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](https://gist.github.com/justinfagnani/7d4a4acfc4dd00dde3c62db13731f68f)), 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!
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [February 7, 2024, 10:49am UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823/2 "2024-02-07T10:49:59Z")
You can use the Lezer parser system (as used in CodeMirror) to highlight code without an editor. See [here](https://lezer.codemirror.net/examples/highlight/#running-a-highlighter) for an example.
---
### Author:  [@shshaw](https://discuss.codemirror.net/u/shshaw)
#### Post date: [February 7, 2024, 2:20pm UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823/3 "2024-02-07T14:20:09Z")
Is there a basic way to integrate that Lezer parsing with `EditorView.theme`?
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [February 7, 2024, 2:43pm UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823/4 "2024-02-07T14:43:36Z")
Not really—editor themes style parts of the editor, not the syntax.
---
### Author:  [@lancejpollard](https://discuss.codemirror.net/u/lancejpollard)
#### Post date: [February 7, 2024, 7:25pm UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823/5 "2024-02-07T19:25:48Z")
Ok interesting thanks for the example at [Lezer Highlighting Example](https://lezer.codemirror.net/examples/highlight/#running-a-highlighter)
So I am using [react-codemirror/themes/dracula/src/index.ts at master · uiwjs/react-codemirror · GitHub](https://github.com/uiwjs/react-codemirror/blob/master/themes/dracula/src/index.ts) 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](https://github.com/uiwjs/react-codemirror/blob/042b6c9a7d64b669219f2425a0fc2877ecf05a32/themes/theme/src/index.tsx#L113-L118)
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.
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [February 8, 2024, 9:16am UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823/6 "2024-02-08T09:16:03Z")
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`.
---
### Author:  [@lancejpollard](https://discuss.codemirror.net/u/lancejpollard)
#### Post date: [February 9, 2024, 6:59am UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823/7 "2024-02-09T06:59:34Z")
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?
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [February 9, 2024, 9:27am UTC](https://discuss.codemirror.net/t/syntax-highlighting-in-codemirror-v6-without-the-editor-functionality/7823/8 "2024-02-09T09:27:49Z")
If you have a CodeMirror-style [`HighlightStyle`](https://codemirror.net/docs/ref/#language.HighlightStyle), you can pass that as highlighter to `highlightCode`, and use [`StyleModule.mount`](https://github.com/marijnh/style-mod/?tab=readme-ov-file#class-stylemodule) on `myHighlightStyle.module` to load the CSS associated with it.