Categories
PHP

Using highlight.js on WordPress

I was looking for a replacement for the syntax highlighter I was using on my blog, since SyntaxHighlighter Evolved never really gave me satisfaction (unwanted advertisements next to the code blocks, poor styling).

I wanted a lightweight solution and found highlight.js. It highlights blocks on code on the client side and can be enabled with just a few lines:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

There used to be a plugin to integrate it to WordPress but it was removed for security reasons (I am not sure what this means).

It does not really matter; since the installation of the library is so easy, I figured I’d write my own plugin. It is as dumb as you would expect since it is only adding the three lines shown above. It loads the latest version of the library and the CSS file from jsdelivr.

To create a code block from Gutenberg, simply start a new paragraph with three back ticks: “` and paste your code within it.

The plugin repository is here, but the plugin is so simple that I can paste the code here:

<?php
/**
 * Plugin Name: HighlightJS WP
 * Plugin URI: https://github.com/AdrienPoupa/HighlightJS-WP
 * Description: HighlightJS WordPress Integration
 * Version: 1.0.0
 * Author: Adrien Poupa
 * Author URI: https://adrien.poupa.fr
 * License: GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

 // Prevent direct access
if ( ! defined( 'WPINC' ) ) {
	die;
}

add_action( 'wp_enqueue_scripts', 'hjswp_enqueue_wphighlightjs' );

/**
 * Load HighlightJS
 */
function hjswp_enqueue_wphighlightjs() {
	// Enable the plugin only for singular posts
	if ( ! is_singular() ) {
		return;
	}

	wp_enqueue_style( 'highlightjs-css', '//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css' );

	wp_enqueue_script( 'highlightjs', '//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js', '', 'latest', true );

	wp_add_inline_script( 'highlightjs', 'hljs.initHighlightingOnLoad();' );
}

You may want to modify it if you wish to load a specific version of highlight.js or if you want to use a different theme.

I tried to release it to WordPress.org but apparently I can’t because they “no longer accept frameworks, boilerplates, and libraries as stand-alone plugins”. Oh well, nevermind, just get it from here 🙂

4 replies on “Using highlight.js on WordPress”

… I tried to release it to WordPress.org but apparently, I can’t because they “no longer accept frameworks, boilerplates, and libraries as stand-alone plugins”. …

The result is markdown syntax highlighting is broken for more than 2 years on WordPress.

One can see (in inspect) the right HTML is generated but there is no highlight.js to color it.

People who need this are leaving WP in a stampede, escaping to HUGO or some other static CMS, they can host for free on Github, GitLab, and elsewhere …

Still not works for me… I tried several methods to activate this wonderful highlight. Including: changing the theme template, registering scripts in functions.php, adding scripts to header and footer (in various combinations). However, my pre and code remain bored without coloring. I would be grateful for any ideas. Thanks!

Thanks to the author’s very comprehensive description, I was able to completely fix my dilemma after reading this post. I posted my review on the https://bit.ly/3pnSz94, which you may read. Thank you so much for your time and consideration.

Leave a Reply

Your email address will not be published. Required fields are marked *