{"id":983,"date":"2021-05-07T08:09:01","date_gmt":"2021-05-07T08:09:01","guid":{"rendered":"http:\/\/www.ishygddt.xyz\/~blog\/?p=983"},"modified":"2022-03-08T18:51:27","modified_gmt":"2022-03-08T18:51:27","slug":"syntax-highlighting-for-inline-code-in-wordpress","status":"publish","type":"post","link":"http:\/\/www.ishygddt.xyz\/~blog\/2021\/05\/syntax-highlighting-for-inline-code-in-wordpress","title":{"rendered":"Applying highlight.js to inline code on WordPress"},"content":{"rendered":"

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

hljs.configure({ cssSelector: 'code' });\nhljs.highlightAll();<\/code><\/pre>\n
\u2014 then be sure to remember to add the language-*<\/code> classes to your inline <code><\/code> tags!<\/p>\n
You may also want to add this site-specific CSS:<\/p>\n
\/* why does hljs put such phat padding in code blocks by default lol *\/\ncode.hljs {\n\tpadding: 1pt 2pt;\n}\npre code.hljs {\n\tpadding: revert;\n}<\/code><\/pre>\n
\n
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<\/em> shipped with some API changes, including refactoring the highlightAll<\/code> function that you're supposed to use so that it can be used with a custom selector, yielding the easy solution above.<\/p>\n
If you are, for some weird reason, still running an older version<\/strong> (<11) of Highlight.js, or an older version (<3) of Prismatic, I've kept around the legacy init script that originally warranted this blogpost\u2014it is forwards-compatible, so you can use it with no fear; it will continue working through<\/em> the Prismatic 3.0 update:<\/p>\n
\/\/ This init script was written by James E.\n\/\/ on May 7th, 2021. Its purpose is to enable\n\/\/ highlight.js to apply to "inline" code tags\n\/\/ (i.e. those that are the child of a p or\n\/\/ even a span element), as well as "block" code\n\/\/ i.e. those wrapped in pre tags on WordPress).\n\n\/\/ As of Prismatic version 3.0 (hljs version 11),\n\/\/ released on January 13th, 2022, this convoluted\n\/\/ monster of a script is no longer needed.\n\/\/ While it is forwards-compatible and shouldn't\n\/\/ break when you update the plugin, you should\n\/\/ probably replace it with the newer syntax as\n\/\/ soon as you can:\n\/\/ http:\/\/www.ishygddt.xyz\/~blog\/2021\/05\/syntax-highlighting-for-inline-code-in-wordpress\n\/\/ If, however, you do experience breakage caused\n\/\/ by this script interacting with a Prismatic update,\n\/\/ please leave a comment on the above post and I'll\n\/\/ try to fix it, albeit too late to matter for you.\n\nwindow.addEventListener('DOMContentLoaded', event => {\n  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");\n  let sheet = event.target.getElementById('prismatic-highlight-css').sheet;\n  sheet.addRule('.hljs:not(pre>*)', 'padding: revert');\n  Array.from(sheet.rules)\n  .filter(rule => rule.selectorText == '.hljs'\n               && rule.style.display == 'block')\n  .forEach(rule => {\n    rule.style.removeProperty('display');\n  });\n  event.target.querySelectorAll('code')\n  .forEach(hljs.highlightElement || hljs.highlightBlock);\n}, false);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
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 \u201cInit Script\u201d field: hljs.configure({ cssSelector: 'code' }); hljs.highlightAll(); \u2014 then be sure …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[22,61,62],"class_list":["post-983","post","type-post","status-publish","format-standard","hentry","category-drafts","tag-meta","tag-syntax-highlighting","tag-wordpress"],"_links":{"self":[{"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/posts\/983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/comments?post=983"}],"version-history":[{"count":37,"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/posts\/983\/revisions"}],"predecessor-version":[{"id":1735,"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/posts\/983\/revisions\/1735"}],"wp:attachment":[{"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/media?parent=983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/categories?post=983"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ishygddt.xyz\/~blog\/wp-json\/wp\/v2\/tags?post=983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}