unified

Project: rehypejs/rehype-highlight

Package: rehype-highlight@5.0.0

  1. Dependents: 29
  2. rehype plugin to highlight code blocks with lowlight (highlight.js)
  1. unified 173
  2. plugin 137
  3. html 122
  4. rehype 87
  5. hast 73
  6. rehype-plugin 61
  7. syntax 27
  8. highlight 6
  9. highlighting 2

rehype-highlight

Build Coverage Downloads Size Sponsors Backers Chat

rehype plugin to highlight the syntax of code with lowlight (highlight.js).

rehype-highlight is built to work with all syntaxes supported by highlight.js. It starts off with 35 common languages registered. You can add up to 191 languages.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm:

npm install rehype-highlight

Use

Say example.html looks as follows:

<h1>Hello World!</h1>

<pre><code class="language-js">var name = "World";
console.warn("Hello, " + name + "!")</code></pre>

…and example.js like this:

import {readSync} from 'to-vfile'
import {reporter} from 'vfile-reporter'
import {rehype} from 'rehype'
import rehypeHighlight from 'rehype-highlight'

const file = readSync('example.html')

rehype()
  .data('settings', {fragment: true})
  .use(rehypeHighlight)
  .process(file)
  .then((file) => {
    console.error(reporter(file))
    console.log(String(file))
  })

Now, running node example yields:

example.html: no issues found
<h1>Hello World!</h1>

<pre><code class="hljs language-js"><span class="hljs-keyword">var</span> name = <span class="hljs-string">"World"</span>;
<span class="hljs-built_in">console</span>.warn(<span class="hljs-string">"Hello, "</span> + name + <span class="hljs-string">"!"</span>)</code></pre>

API

This package exports no identifiers. The default export is rehypeHighlight.

unified().use(rehypeHighlight[, options])

Syntax highlight pre > code. Uses lowlight under the hood, which is a virtual version of highlight.js.

Configure the language by using a lang-js or language-js class. Ignore code with a no-highlight or nohighlight class. Will auto-detect the syntax language otherwise.

rehype-highlight is built to work with all syntaxes supported by highlight.js. It starts off with 35 common languages registered. You can add up to 191 languages.

options
options.prefix

Prefix to use before classes (string, default: 'hljs-').

options.subset

Scope of languages to check when auto-detecting (boolean or Array.<string>, default: all languages). Pass false to not highlight code without language classes.

options.ignoreMissing

Swallow errors for missing languages (boolean, default: false). By default, unregistered syntaxes throw an error when they are used. Pass true to swallow those errors and thus ignore code with unknown code languages.

options.plainText

List of plain-text languages (Array.<string>, default: []). Pass any languages you would like to be kept as plain-text instead of getting highlighted.

options.aliases

Register more aliases (Object<string | Array.<string>>, default: {}). Passed to lowlight.registerAlias.

options.languages

Register more languages (Record<string, Function>, default: {}). Each key/value pair passed as arguments to lowlight.registerLanguage.

rehype-highlight is built to work with all syntaxes supported by highlight.js. It starts off with 35 common languages registered. You can add up to 191 languages.

Security

Use of rehype-highlight should be safe to use as lowlight should be safe to use. When in doubt, use rehype-sanitize.

Contribute

See contributing.md in rehypejs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer