@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 |