react-codemirror-runmode's Introduction

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

Name	Description
`className`	Class name for the outermost `pre` tag. Default: `''`
`language`	Language to use for syntax highlighting this value. Must be registered prior to usage.
`value`	The code snippet to syntax highlight
`prefix`	Class name prefix for individual node. Default: `cm-`
`inline`	Whether code should be displayed inline (no `<pre>` tag, sets `display: inline`)