Version License TypeScript Build Status Coverage Downloads Chat
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>
$ yarn add -D posthtml posthtml-highlight
or
$ npm i posthtml posthtml-highlight
If using TypeScript, additionally install @types/highlight.js
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))
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 as per highlight.js's usage docs is supported, with the caveat that you must use the lang-* or language-* prefix
Add the nohighlight class as per highlight.js's usage docs