@readme/syntax-highlighter NPM

@readme/syntax-highlighter

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

Installation

npm install --save @readme/syntax-highlighter

Usage

Read Only Mode

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

Read Only with Line Numbers

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

Read Only with Line Numbers and Highlighted Ranges

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 },
    ],
  ],
});

Full CodeMirror

Access to a full code Mirror instance. See configuration settings in the react-codemirror2 library

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

Available Options

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 `<span>` tag, instead of a `<div>`.
`ranges`	Array	Ranges of line numbers to apply highlighting to. Requires `highlightMode` enabled
`tokenizeVariables`	Boolean	Match and render ReadMe variables in your markdown.

Languages Supported

Language	Available language mode(s)
ASP.NET	`asp`, `aspx`
C	`c`
C++	`c++`, `cpp`, `cplusplus`
C#	`cs`, `csharp`
Clojure	`clj`, `cljc`, `cljx`, `clojure`
CSS	`css`, `less`, `sass`, `scss`, `styl`, `stylus`
cURL	`curl`
D	`d`
Dart	`dart`
Docker	`dockerfile`
Erlang	`erl`, `erlang`
Go	`go`
GraphQL	`gql`, `graphql`
Groovy	`gradle`, `groovy`
Handlebars	`handlebars`, `hbs`
HTML/XML	`html`, `xhtml`, `xml`
HTTP	`http`
Java	`java`
JavaScript	`coffeescript`, `ecmascript`, `javascript`, `js`, `jsx`, `node`
JSON	`json`
Julia	`jl`, `julia`
Kotlin	`kotlin`, `kt`
Liquid	`liquid`
Markdown	`markdown`
Objective-C	`objc`, `objectivec`,
Objective-C++	`objc++`, `objcpp`, `objectivecpp`, `objectivecplusplus`,
OCaml	`ocaml`, `ml`
Perl	`perl`, `pl`
PHP	`php`
PowerShell	`powershell`, `ps1`
Python	`py`, `python`
R	`r`
React	`jsx`
Ruby	`jruby`, `macruby`, `rake`, `rb`, `rbx`, `ruby`
Rust	`rs`, `rust`
Scala	`scala`
Shell	`bash`, `sh`, `shell`, `zsh`
SQL	`cql`, `mssql`, `mysql`, `plsql`, `postgres`, `postgresql`, `pgsql`, `sql`, `sqlite`
Swift	`swift`
TOML	`toml`
TypeScript	`ts`, `typescript`
YAML	`yaml`, `yml`