react-codemirror-runmode v1.0.5

react-codemirror-runmode

Syntax highlighter for React, utilizing CodeMirror's parser

Installation

npm install --save react-codemirror-runmode codemirror

You'll also need to provide the CodeMirror language definitions you want to use. We don't bundle these in order to not bloat the component with unused definitions.

Usage

import CodeMirror from 'codemirror'
import 'codemirror/addon/runmode/runmode'
import 'codemirror/mode/meta'
import 'codemirror/mode/javascript/javascript'
import Highlighter from 'react-codemirror-runmode'
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <Highlighter
    codeMirror={CodeMirror}
    theme='solarized'
    value='/* Code to highlight */'
    language='javascript'
  />,
  document.getElementById('root')
)

Styling

Stylesheets are not automatically handled for you - but there is a bunch of premade styles for CodeMirror which you can simply drop in and they'll "just work". You can either grab these from the source, of pull them in using a CSS loader - whatever works best for you. They're also available on cdnjs:

<link
  rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css"
/>

Props

License

MIT License. Developed by Takuya Matsuyama hi@craftz.dog