Compile-time syntax highlighting for code blocks with Prism
Before:
<pre><code class="language-javascript"> const foo = 'bar' console.log(foo) </code></pre>
After:
<pre><code class="language-javascript"> <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'bar'</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span> </code></pre>
$ npm i posthtml posthtml-prism
const fs = require('fs') const posthtml = require('posthtml') const highlight = require('posthtml-prism') const source = fs.readFileSync('./before.html') posthtml([ highlight({ inline: true }) ]) .process(source) .then(result => fs.writeFileSync('./after.html', result.html))
Type: boolean
Default: false
By default, only <code> tags wrapped in <pre> tags are highlighted.
Pass in inline: true to highlight all code tags.
You will also need to include a Prism theme stylesheet in your HTML.
See PrismJS/prism-themes for all available themes.
By default, Prism loads the following languages: markup, css, clike, and javascript.
You can specify the language to be used for highlighting your code, by adding a language-* or lang-* class to the <code> tag:
<pre> <code class="language-php"> $app->post('framework/{id}', function($framework) { $this->dispatch(new Energy($framework)); }); </code> </pre>
You can skip highlighting on a node in two ways:
- add a
prism-ignoreattribute on the node:
<pre> <code prism-ignore>...</code> </pre>
- or, add a
prism-ignoreclass:
<pre> <code class="prism-ignore">...</code> </pre>
In both cases, the prism-ignore attribute/class will be removed and highlighting will be skipped.