How to add language to rehype-highlight

Adding language highlighting to rehype-highlight

rehype-highlight is a rehype plugin to highlight the syntax of code with lowlight. By default it comes with 35 common languages registered but you can add any of the highlight.js 191 languages to this plugin.

Below is an example of how to add languages from highlight.js to a fully functional unified pipeline for processing markdown and adding code highlighting. We import two additional languages: http protocol and nginx specification from highlight.js, and pass the configuration option to rehype-highlight:

import { unified } from 'unified'
import markdown from 'remark-parse'
import remarkGfm from 'remark-gfm'
import remarkRehype from 'remark-rehype'
import rehypeRaw from 'rehype-raw'
import hrehypeStringify from 'rehype-stringify'
import highlight from 'rehype-highlight'
import langHttp from 'highlight.js/lib/languages/http'
import langNginx from 'highlight.js/lib/languages/nginx'

const languages = {
  http: langHttp,
  nginx: langNginx
}

export const processor = unified()
  .use(markdown)
  .use(remarkGfm)
  .use(remarkRehype, { allowDangerousHtml: true })
  .use(rehypeRaw)
  .use(highlight, { languages: languages })
  .use(hrehypeStringify)

Powered by

Node
Github
Copyright 2019 - present