How to use Highlight.js with WordPress and share your code

Would you like to use Highlighter for sharing your custom code in articles created in Gutenberg editor? No need to install plugins. Just use the Highlight.js library. This library will highlight everything between <pre><code>YOUR CODE</code></pre>.

I was using Google highlighter in the past, but since it is deprecated, my favourite is highlighter.js. Today I will show you an effortless way, how to use this highlighter library in WordPress posts.

Sharing code in article without highlight.js

Sharing code in article with highlight.js:

The highlighter will apply automatically to every code block created with Gutenberg editor because it uses <code> and <pre> syntax to apply the styles.

Import .JS and .CSS files

There are multiple options how to import the files:

1. Import from CDN
   1. Find the latest version here: https://github.com/highlightjs/highlight.js#fetch-via-cdn
   2. Add code to Load JS + CSS in the head
   3. Create condition to load only on frontend of posts (you can do that with is_single() )

The code in head will look like this when using CDN to load highlight.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

2. Load script locally
   1. Download files from: highlight.js (highlightjs.org)
   2. Upload to your scripts folder under /wp-content/uploads/
   3. Load JS + CSS in the head
   4. Create condition to load only on frontend of posts (you can do that with is_single() )

The code in head will look like this when using local files to load highlight.js:

<link rel="stylesheet" href="https://www.yoursite.com/wp-content/uploads/scripts/highlight.js/11.4.0/styles/default.min.css">
<script src="https://www.yoursite.com/wp-content/uploads/scripts/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

I am using the Advanced scripts, which can load scripts from CDN and from local storage. I would like to load the local files, because I don't want to send any cookies to the third party CDN.

This plugin also lets you use the conditions. So I will set the script to load only when post type = Post.

Highlight.js also offers many themes and more programming languages. You can use default.min.css or load another theme. You can see all styles here: highlight.js demo (highlightjs.org) If you need to use other programming language then the default included ones, then you can load it's JS file separately.

Load the main Highlight.js

Load the Highlight.js Theme CSS

Init the Highlight.js script

After loading files (! it wouldn't work if you load the script after this function) you need to init the highlighter with this script:

<script>hljs.highlightAll();</script>

Clear the cache and test it

It should be working automatically now! If you have any problems, look in the dev tools console first. If you have any questions, write them below to the comments section.

Share your code within Oxygen builder instead of Gutenberg

If you want to share code, but using Oxygen builder directly, then you just need to use the code block:

1. Create Code block
2. Add your code and escape the special characters < and >
3. Wrap it in <pre><code>your code</code></pre>
4. Save the page, refresh cache and voilá

Fix overflowing code

If you find your code overflowing the container, add this to your stylesheet. It is caused by words not being break and overflow not being hidden on desktop.

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
    word-break: break-word;
}