Aleš Sýkora / November 28, 2023 / 2 comments

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

Post summary: 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…

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

WordPress do not offer any code highlighting by default

Sharing code in article with highlight.js:

Highlight.js offers many themes. This one is called qtcreator-dark

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>
  1. 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 JS for Highlight.js in WordPress Advanced Scripts plugin

Load the Highlight.js Theme CSS

Load CSS theme for Highlight.js – skin called qtcreator-dark

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>
initializing Highlighter.js

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á
Code showcase prepared in Oxygen Code block

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;
}

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

2 comments

Share Your Thoughts