Skip to content

readmeio/syntax-highlighter

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date
Mar 8, 2024
Mar 8, 2024
Mar 29, 2022
Sep 1, 2023
Sep 1, 2023
Aug 31, 2020
Sep 15, 2020
Aug 31, 2020
Sep 1, 2020
Jul 6, 2021
Jul 1, 2023
Sep 15, 2020
Aug 31, 2020
Aug 31, 2020
Oct 7, 2023
May 2, 2022
Mar 8, 2024
Mar 8, 2024
Sep 1, 2022
Sep 1, 2022

Repository files navigation

@readme/syntax-highlighter

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

npm Build

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