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. those not wrapped in <pre> blocks), simply go Settings > Prismatic > Highlight.js and paste this monster into the “Init Script” field:

// 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).

// If it breaks, please visit this URL for updates,
// or to file a bug report in the comments:
// https://www.ishygddt.xyz/~blog/2021/05/syntax-highlighting-for-inline-code-in-wordpress

window.addEventListener('DOMContentLoaded', event => {
  Array.from(event.target.getElementById('prismatic-highlight-css').sheet.rules)
  .filter(rule => rule.selectorText == '.hljs'
               && rule.style.display == 'block')
  .forEach(rule => {
    rule.style.removeProperty('display');
    rule.style.removeProperty('padding');
  });
  event.target.querySelectorAll('code')
  .forEach(hljs.highlightElement || hljs.highlightBlock);
}, false);

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


When I wrote this, Prismatic was shipping with version 10.5.0 and the latest version was 10.7.2. It looks like version 11 is going to come 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.

At some point in the future, once Prismatic updates to v11 or newer of Highlight.js, you'll be able to simply put this:

/* DON'T USE THIS UNTIL PRISMATIC UPDATES TO VERSION 11 OF HIGHLIGHT.JS:
//	https://wordpress.org/plugins/prismatic/#developers
*/
hljs.config({ cssSelector: 'code' });
hljs.highlightAll();

Leave a Reply

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