readmeio/syntax-highlighter

ReadMe's React-based syntax highlighter

@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