Applying highlight.js to inline code on WordPress

If you're using the plugin Prismatic to apply highlight.js to your code excerpts, but you want it to also affect inline <code> tags (i.e. not only those wrapped in <pre> blocks), simply go Settings > Prismatic > Highlight.js and paste this into the “Init Script” field:

hljs.configure({ cssSelector: 'code' });
hljs.highlightAll();

— then be sure to remember to add the language-* classes to your inline <code> tags!

You may also want to add this site-specific CSS:

/* why does hljs put such phat padding in code blocks by default lol */
code.hljs {
	padding: 1pt 2pt;
}
pre code.hljs {
	padding: revert;
}

When I first wrote this, Prismatic was shipping with Highlight.js version 10.5.0 (and the latest version was 10.7.2). Highlight.js version 11 has since shipped with some API changes, including refactoring the highlightAll function that you're supposed to use so that it can be used with a custom selector, yielding the easy solution above.

If you are, for some weird reason, still running an older version (<11) of Highlight.js, or an older version (<3) of Prismatic, I've kept around the legacy init script that originally warranted this blogpost—it is forwards-compatible, so you can use it with no fear; it will continue working through the Prismatic 3.0 update:

// This init script was written by James E.
// on May 7th, 2021. Its purpose is to enable
// highlight.js to apply to "inline" code tags
// (i.e. those that are the child of a p or
// even a span element), as well as "block" code
// i.e. those wrapped in pre tags on WordPress).

// As of Prismatic version 3.0 (hljs version 11),
// released on January 13th, 2022, this convoluted
// monster of a script is no longer needed.
// While it is forwards-compatible and shouldn't
// break when you update the plugin, you should
// probably replace it with the newer syntax as
// soon as you can:
// http://www.ishygddt.xyz/~blog/2021/05/syntax-highlighting-for-inline-code-in-wordpress
// If, however, you do experience breakage caused
// by this script interacting with a Prismatic update,
// please leave a comment on the above post and I'll
// try to fix it, albeit too late to matter for you.

window.addEventListener('DOMContentLoaded', event => {
  if(('highlightElement' in hljs) || !('highlightBlock' in hljs)) console.warn("This init script was designed for an older version of Highlight.js.\nThe administrator of this website should install the newer version at the earliest opportunity:\nhttps://github.com/highlightjs/highlight.js/issues/945#issuecomment-835573185");
  let sheet = event.target.getElementById('prismatic-highlight-css').sheet;
  sheet.addRule('.hljs:not(pre>*)', 'padding: revert');
  Array.from(sheet.rules)
  .filter(rule => rule.selectorText == '.hljs'
               && rule.style.display == 'block')
  .forEach(rule => {
    rule.style.removeProperty('display');
  });
  event.target.querySelectorAll('code')
  .forEach(hljs.highlightElement || hljs.highlightBlock);
}, false);