Syntax highlighting for react, utilizing CodeMirror's parser
MIT License
Syntax highlighter for React, using CodeMirror 6. It automatically loads the language metadata and dynamically loads language parser modules based on the specified language.
npm install --save react-codemirror-runmode
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(
<Highlighter lang="js" theme={oneDarkHighlightStyle}>
{code}
</Highlighter>
)
You can apply custom themes using CodeMirror's theme system. This component uses HighlightStyle
objects to apply styles, which you can customize or replace.
Highlighter
Props:
lang
: string
- The name of the languagetheme
: Highlighter
- The highlight stylechildren
: string
- The code to highlighthighlightCode<Output>(languageName, input, highlightStyle, callback): Promise<Output[]>
Parameters:
languageName
: string
- The name of the languageinput
: string
- The code to highlighthighlighter
: Highlighter
- The highlight stylecallback
: (text: string, style: string | null, from: number, to: number) => Output)
- A callback function that converts the parsed tokensgetCodeParser(languageName, defaultLanguage?): Promise<Parser | null>
Parameters:
languageName: string
- The name of the languagedefaultLanguage?: Language
- A fallback language (Optional)MIT License. Developed by Takuya Matsuyama [email protected]