react-codemirror

CodeMirror component for React. demo @uiwjs.github.io/react-codemirror/

<a href="https://uiwjs.github.io/react-codemirror/"><img src="https://raw.githubusercontent.com/uiwjs/react-codemirror/master/react-codemirror.png" /></a>

Features:

🌱 Automatically load mode files based on configuration.
🚀 Quickly and easily configure the API.

Install

# Not dependent on uiw.
npm install @uiw/react-codemirror --save

Usage

import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/monokai.css';

const code = 'const a = 0;';

<CodeMirror
  value={code}
  options={{
    theme: 'monokai',
    keyMap: 'sublime',
    mode: 'jsx',
  }}
/>

requiring codemirror resources, This is often the case when specifying certain language modes and themes. Just set the mode, the language resources will automatically lazy loading.

import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/addon/display/autorefresh';
import 'codemirror/addon/comment/comment';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/monokai.css';

const code = 'const a = 0;';

<CodeMirror
  value={code}
  options={{
    theme: 'monokai',
    tabSize: 2,
    keyMap: 'sublime',
    mode: 'jsx',
  }}
/>

Change Theme

import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/addon/display/autorefresh';
import 'codemirror/addon/comment/comment';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/keymap/sublime';
+ import 'codemirror/theme/monokai.css';

const code = 'const a = 0;';

  <CodeMirror
    value={code}
    options={{
+    theme: 'monokai',
      keyMap: 'sublime',
      mode: 'jsx',
    }}
  />