https://github.com/craftzdog/react-codemirror-runmode
Syntax highlighting for react, utilizing CodeMirror's parser
https://github.com/craftzdog/react-codemirror-runmode
codemirror react syntax
Last synced: 8 months ago
JSON representation
Syntax highlighting for react, utilizing CodeMirror's parser
- Host: GitHub
- URL: https://github.com/craftzdog/react-codemirror-runmode
- Owner: craftzdog
- License: mit
- Created: 2017-10-10T05:53:08.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-30T21:42:35.000Z (8 months ago)
- Last Synced: 2025-04-30T22:14:11.990Z (8 months ago)
- Topics: codemirror, react, syntax
- Language: TypeScript
- Homepage:
- Size: 1.34 MB
- Stars: 35
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-codemirror-runmode
Syntax highlighter for React, using CodeMirror 6.
It automatically loads [the language metadata](https://github.com/codemirror/language-data) and dynamically loads language parser modules based on the specified language.
## Installation
```sh
npm install --save react-codemirror-runmode
```
## Usage
```javascript
import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
import { Highlighter } from 'react-codemirror-runmode'
import React from 'react'
import ReactDOM from 'react-dom/client'
const code = 'const x = 123'
ReactDOM.createRoot(document.getElementById('app')!).render(
{code}
)
```
## Theming
You can apply custom themes using CodeMirror's theme system. This component uses [`HighlightStyle`](https://codemirror.net/docs/ref#language.HighlightStyle) objects to apply styles, which you can customize or replace.
## Reference
### `Highlighter`
Props:
- `lang`: `string` - The name of the language
- `theme`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter) - The highlight style
- `children`: `string` - The code to highlight
### `highlightCode(languageName, input, highlightStyle, callback): Promise`
Parameters:
- `languageName`: `string` - The name of the language
- `input`: `string` - The code to highlight
- `highlighter`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter) - The highlight style
- `callback`: `(text: string, style: string | null, from: number, to: number) => Output)` - A callback function that converts the parsed tokens
### `getCodeParser(languageName, defaultLanguage?): Promise`
Parameters:
- `languageName: string` - The name of the language
- `defaultLanguage?: Language` - A fallback language (Optional)
## License
MIT License. Developed by Takuya Matsuyama