WordPress Post Syntax Highlighting with Highlight.js and Prism


There are plenty of WordPress plugins for syntax highlighting, but the ones I tried (and I tried many) tried to integrate into the editor, letting you edit code with syntax highlighting enabled.

This isn’t what I wanted.

I wanted a syntax highlighter to highlight the code blocks in my blog posts as visitors were reading them.

While I couldn’t find any WordPress plugin that would do this for me, I knew of JavaScript libraries that could get this done such like highlight.js and prism, so I used these to build what I wanted.

Which one did I go with? Both.

Why use both?

Highlight.js and Prism both have their advantages.

Highlight.js has an awesome language auto-detection feature that can accurately detect the language used in a give code block. In then adds a language-xxx class to the code block to identify it, such as language-php.

Prisma, on the other hand, has cleaner looking themes and rich set of plugins for things like line numbers and copying code to the clipboard. It doesn’t support auto-detection though, and I don’t want to manually edit my posts to add the necessary metadata.

I needed the auto-detection from Highlight.js with the themes and plugins from Prism, so I used both.

Give me the code

Here it is.

I first load and run highlight.js to add the necessary language classes to my code blocks. Then I load Prism and the Prism CSS to highlight the code.

<script src="//"></script>

	document.addEventListener("DOMContentLoaded", function () {

<link rel="stylesheet" href="" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Add a Link to Your Plugin from the WordPress Plugin List


There’s nothing more annoying than installing a new WordPress plugin and having to dig around the WordPress admin menu to figure out where the plugin lives. Is it a new top level page? No. In the settings menu? No chance. Then where?

You can improve the onboarding experience for new plugin users by including a link to your plugins dashboard or settings page right inside the plugin list. As an example, the screenshot below shows the “Analytics Dashboard” link I added for Independent Analytics.

Adding a link requires you to use the plugin_action_links filter. You’ll need to call add_filter with two arguments. The first argument is the filter name, and the second argument is a callback function to run.

The filter name should start with plugin_action_link followed by the path to your plugin file. This includes your plugins folder name as well as your plugins main file name (the one with the header comment).

For Independent Analytics that would be independent-analtyics/iawp.php.

add_filter('plugin_action_links_independent-analytics/iawp.php', 'add_plugin_action_link');

The callback function gets called with a single argument, an array of the current links. The callbacks job is to add new links to the array and then return the modified array. You can add links to the beginning of the array to have them show up first or onto the end of the array to have them show up last.

function add_plugin_action_link($links)
    // Build the URL
    $url = add_query_arg('page', 'independent-analytics', admin_url('admin.php'));

    // Create the link
    $settings_link = '<a class="calendar-link" href="' . esc_url($url) . '">' . esc_html__('Analytics Dashboard', 'iawp') . '</a>';

    // Link first: Having the link show up as the first link
    array_unshift($links, $settings_link);

    // Link last: Having the link show up as the last link
    // array_unshift($links, $settings_link);

    // Return the modified $links array
    return $links;

That’s all there is to it. You can add as many links as you like, though one or two should be more than enough.