posthtml / posthtml-highlight

:art: Syntax Highlighting for PostHTML

PostHTML Highlight Plugin

Compile-time syntax highlighting for code blocks via highlight.js

Before:

<pre><code>
  const foo = 'foo'
  console.log(foo)
</code></pre>

After:

<pre><code class="hljs">
  <span class="hljs-keyword">const</span> foo = <span class="hljs-string">'foo'</span>
  console.<span class="hljs-built_in">log</span>(foo)
</code></pre>

Install

$ yarn add -D posthtml posthtml-highlight

or

$ npm i posthtml posthtml-highlight

If using TypeScript, additionally install @types/highlight.js

Usage

const fs = require('fs')
const posthtml = require('posthtml')
const highlight = require('posthtml-highlight')

const source = fs.readFileSync('./before.html')

posthtml([
  highlight(
    /* optional */ {
      /**
       * By default, only code tags wrapped in pre tags are highlighted (i.e. <pre><code><code/><pre/>)
       *
       * Set `inline: true` to highlight all code tags
       */
      inline: true,

      /**
       * You may also pass any highlight.js options (http://highlightjs.readthedocs.io/en/latest/api.html#configure-options)
       */
      useBR: true,
    }
  ),
])
  .process(source)
  .then((result) => fs.writeFileSync('./after.html', result.html))

Styling

You will also need to include a highlight.js stylesheet

View the available color schemes here, then
a) include via a CDN
b) install via npm (yarn add -D highlight.js, ./node_modules/highlight.js/styles/*)
c) download via the highlight.js repo

Specifying a language

Specifying a language as per highlight.js's usage docs is supported, with the caveat that you must use the lang-* or language-* prefix

Skip highlighting on a node

Add the nohighlight class as per highlight.js's usage docs