Skip to content

Latest commit

 

History

History
61 lines (40 loc) · 1.89 KB

README.md

File metadata and controls

61 lines (40 loc) · 1.89 KB

react-codemirror-runmode

Syntax highlighter for React, using CodeMirror 6. It automatically loads the language metadata and dynamically loads language parser modules based on the specified language.

Installation

npm install --save react-codemirror-runmode

Usage

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>
)

Theming

You can apply custom themes using CodeMirror's theme system. This component uses HighlightStyle objects to apply styles, which you can customize or replace.

Reference

Highlighter

Props:

  • lang: string - The name of the language
  • theme: Highlighter - The highlight style
  • children: string - The code to highlight

highlightCode<Output>(languageName, input, highlightStyle, callback): Promise<Output[]>

Parameters:

  • languageName: string - The name of the language
  • input: string - The code to highlight
  • highlighter: 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<Parser | null>

Parameters:

  • languageName: string - The name of the language
  • defaultLanguage?: Language - A fallback language (Optional)

License

MIT License. Developed by Takuya Matsuyama [email protected]