While trying to do some minor site updates on this blog, an unwanted syntactical markup tumbleweed put a hitch up in my giddalong. That is to say, WP Monostack Theme parses every post’s content and wraps various categories of words (conjunctions, for example) with markup that helps css prettify it. I really like this feature. But it was mucking up my codeblocks by visibly injecting the aforementioned code. I briefly searched for a fix but when I couldn’t find one quickly I decided to tackle it myself. Fortunately, the parsing was done in JS and the fix was quite simple. Here’s how I fixed it:
// added terminal p to querySelectorAll selector list
// to limit highlighting to non-code blocks
document.querySelectorAll( '.hentry .entry-content p' ).forEach( content => {
content.querySelectorAll( '*' ).forEach( highlight );
highlight( content );
} );
My WP post code highlighter SyntaxHighlighter wraps code blocks in divs. The above only affects paragraph tags, so my precious code is safe. If your code is rendered via some other means, you may have to alter this, though I think it’s fairly robust as paragraphs are WP’s default return element.