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.