@readme/syntax-highlighter

ReadMe's React-based syntax highlighter based on [CodeMirror][codemirror] and [react-codemirror2][react-codemirror]

 


Installation

``
npm install --save @readme/syntax-highlighter
`

Usage

$3

`js
const syntaxHighlighter = require('@readme/syntax-highlighter');
const ele = syntaxHighlighter('console.log("Hello, world!");', 'js');
`

$3

`js
const syntaxHighlighter = require('@readme/syntax-highlighter');
const ele = syntaxHighlighter('console.log("Hello, world!");', 'js', { ...opts, highlightMode: true });
`

$3

`js
const syntaxHighlighter = require('@readme/syntax-highlighter');
const ele = syntaxHighlighter('console.log("Hello, world!");', 'js', {
...opts,
highlightMode: true,
ranges: [
[
{ ch: 0, line: 0 },
{ ch: 0, line: 1 },
],
],
});
`

$3

Access to a full code Mirror instance. See configuration settings in the [react-codemirror2 library][react-codemirror#props]

`js
const syntaxHighlighter = require('@readme/syntax-highlighter');
const ele = syntaxHighlighter('console.log("Hello, world!");', 'js', { ...opts, editable: true }, { ...editorProps });
`

$3


| Name | Type | Description |
| :--- | :--- | :--- |
| customTheme | String | Highlighting theme. One of neo, material-palenight, or tomorrow-night. (Setting this will override the dark mode option.)
| dark | Boolean | Enable dark mode. |
| editable | Boolean | Enable the full CodeMirror instance |
| highlightMode | Boolean | Enable line number display. |
| inline | String | Wrap code in a tag, instead of a