remark-highlight.js

remark plugin to highlight code blocks with highlight.js (via lowlight).

This package integrates with remark-html. It may be better to work with rehype, which is specifically made for HTML, and to use rehype-highlight instead of this package.

Install

npm:

npm install remark-highlight.js

Use

Say we have the following Markdown file, example.md:

~~~css
h1 {
  color: red;
}
~~~

And our script, example.js, looks as follows:

const vfile = require('to-vfile')
const report = require('vfile-reporter')
const unified = require('unified')
const markdown = require('remark-parse')
const html = require('remark-html')
const highlight = require('remark-highlight.js')

unified()
  .use(markdown)
  .use(highlight)
  .use(html)
  .process(vfile.readSync('example.md'), (err, file) => {
    console.error(report(err || file))
    console.log(String(file))
  })

Now, running node example yields:

example.md: no issues found
<pre><code class="hljs language-css"><span class="hljs-selector-tag">h1</span> {
  <span class="hljs-attribute">color</span>: red;
}</code></pre>

API

remark().use(highlight[, options])

highlight code blocks with highlight.js (via lowlight).

For a list of languages that you can pass to these options, see the highlight.js documentation.

options

options.include

If this option is defined (Array), this plugin will only highlight languages that are in this list.

options.exclude

If this option is defined (Array), this plugin will only highlight languages that are not in this list.

options.prefix

If this option is defined (string), this plugin will use this prefix for classes instead of hljs-.

Security

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

Related

• remark-midas — Highlight CSS code blocks with midas (rehype compatible)
• remark-tree-sitter — Highlight code with tree-sitter (rehype compatible)
• remark-code-frontmatter — Extract frontmatter from markdown code blocks
• remark-code-extra — Add to or transform the HTML output of code blocks (rehype compatible)
• rehype-highlight — rehype plugin to highlight code (via lowlight)
• rehype-prism — rehype plugin to highlight code (via refractor)
• rehype-shiki — rehype plugin to highlight code with shiki

Contribute

See contributing.md in remarkjs/.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 © Ben Briggs