@prpl/plugin-code-highlight

A plugin for PRPL that highlights code blocks with Highlight.js.

Dependencies

@prpl/plugin-code-highlight has two dependencies, highlight.js and html-escaper.

Usage

import { interpolate } from '@prpl/core';
import { highlightCode } from '@prpl/plugin-code-highlight';

await interpolate();
await highlightCode();

Notes

This plugin does not include any CSS. It processes code blocks given the specified syntax (e.g., JavaScript, Python) and outputs DOM structures in place that are possible to style with CSS.

<code> elements are expected to have a language-* class with languages supported by Highlight.js.

If you're writing in HTML you can write your blocks like this:

<pre>
  <code class="language-javascript">console.log('Hello world!');</code>
</pre>

If you're writing in markdown you can write your blocks like this:

```javascript
console.log('Hello world!');
```

See the default CSS stylesheet for an example of how to style Highlight.js processed DOM structures.