The highlight.js theme found in the Halfmoon documentation.

Install the package with npm.

npm install halfmoon-highlight

Then, import it as a module.

import 'halfmoon-highlight';

The styles are also available from CDN.

<link href="https://cdn.jsdelivr.net/npm/halfmoon-highlight" rel="stylesheet" />

<!-- OR -->

<link href="https://unpkg.com/halfmoon-highlight" rel="stylesheet"/>

Install highlight.js and call the initialisation method.

hljs.initHighlightingOnLoad();

Then, include your code inside <pre> and <code> tags.

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

If you need help, take a look at the highlight.js documentation.

Using the .is-card class on a <pre> tag will add the container styles from the Halfmoon documentation.

<pre class="is-card">
  <code class="js">
    console.log('Hello world!');
  </code>
</pre>

This should be used if the code block is part of a .card component.

MIT