https://github.com/jamischarles/codemirror-server-render
Renders CodeMirror 6 syntax highlighting as a string so you can use it at build time (ie: blog) or server-side.
https://github.com/jamischarles/codemirror-server-render
codemirror6 server-side-rendering syntax-highlighting
Last synced: 2 months ago
JSON representation
Renders CodeMirror 6 syntax highlighting as a string so you can use it at build time (ie: blog) or server-side.
- Host: GitHub
- URL: https://github.com/jamischarles/codemirror-server-render
- Owner: jamischarles
- Created: 2022-05-03T20:50:19.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-23T22:11:09.000Z (about 3 years ago)
- Last Synced: 2025-09-23T10:01:48.103Z (6 months ago)
- Topics: codemirror6, server-side-rendering, syntax-highlighting
- Language: HTML
- Homepage:
- Size: 869 KB
- Stars: 9
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## TODO:
1. Make it work with lezer only and latest deps. (latest deps: CHECK) Lezer-only?
2. Make it work minimal client side with just json (maybe fork it, or make a different repo for that use case...)
# CodeMirror-server-render (CodeMirror 6)
Renders CodeMirror 6 syntax highlighting as a string so you can use it at build time (ie: blog) or server-side.
Verified to work with latest CM6 `0.20` themes.
## Installation
`npm install codemirror-server-render`
## Usage
```js
renderString( "alert('hello')" ); // default theme, default language (js). Returns object
// -> {code:
alert('hello'); , css: {...} }
```
```js
var result = renderString(code, oneDarkHighlightStyle, oneDarkTheme, {lineNumbers: true}); // themed for oneDark, and add lineNumbers
```
## Return value of `renderString()`
```js
{
code, // a string of tokenized html, incuding editor wrapper html
codeLinesOnly, // a string of tokenized html only, excluding the wrapper elements
css: {
baseEditorStyles, // string of base styles needed to use the editor. Loaded from './base-theme.css'
highlightRules // an array of css rule strings based on the theme you are using (matches the classNames in 'code' prop above)
}
}
```
## Examples
### Default styles, default language (JavaScript)
```js
import { renderString } from "codemirror-server-render";
var code = `function add(a,b){
return a+b;
}
// amazing comment!`;
let result = renderString(code);
const html = `
${result.css.baseEditorStyles}
${result.css.highlightRules.join('\n')}
${result.code}
`
```
### `One-dark` theme and `html` language. LineNumbers enabled
```js
import { htmlLanguage } from '@codemirror/lang-html';
import { oneDarkHighlightStyle, oneDarkTheme } from '@codemirror/theme-one-dark'
import { renderString } from "codemirror-server-render";
var code = `
.red {color: red;}
`;
var result = renderString(code, oneDarkHighlightStyle, oneDarkTheme, {lineNumbers: true});
const html = `
${result.css.baseEditorStyles}
${result.css.highlightRules.join('\n')}
${result.code}
`
```
## Customizing Editor CSS
Take a look at base-theme.css in this repo, and go from there.