Disable Highlighting in Comments with Prismatic WordPress Plugin
Prismatic is a free WordPress plugin that adds syntax highlighting to code samples. You can use either Highlight.js or Prism.js to make your code snippets look amazing. By default, Prismatic highlights code snippets in both post content and post comments. This quick tutorial shows how to disable highlighting in post comments by adding a simple code snippet to your WordPress. Estimated time to complete ~2 minutes.
The Goal
By default either Prism.js or Highlight.js will automatically highlight any code snippets on the page. For example, let’s say we add highlighting to a code snippet contained in the post content. We add the language-code class to the <pre> tag, save changes and done. The code snippet contained in our post content now will be syntax-highlighted on the front end.
Now let’s scroll down to the post comments. If any comments contain code snippets via <pre> tag, they also will be highlighted, automatically. Even if the <pre> tag doesn’t include the requisite language-code class, the code still will be highlighted. This happens because of the way that Prism.js and Highlight.js work. Once their scripts/styles are included on the page, they apply to all <pre> tags.
Thus the goal of this tutorial is to stop highlighting for any code that doesn’t include the language-code class. Let’s look at how to do it..
language-code, it refers to any code class that you may want to add, like language-css, language-html, language-javascript, and so forth. Just replace code with the desired code name. Check the Prismatic documentation for all the supported languages and respective abbreviations.Step 1: Add the WordPress code
To disable code highlighting in comments, add the following custom code to your WordPress-powered site.
function shapeSpace_filter_text($comment_text, $comment = null) {
if ($comment !== null) {
$comment_text = str_ireplace('<pre>', '<pre class="nohighlight">', $comment_text);
}
return $comment_text;
}
add_filter('comment_text', 'shapeSpace_filter_text', 10, 2);No changes need made, simply copy/paste and done.
You can see an example of this script working here at Perishable Press (scroll to the comments section and look at the code in this comment). Compare the code in the comment with the code in the main post. The code samples are highlighted in the post content, and thus normally also would be highlighted in the comments. But as you’ll notice in the comment, the code is not highlighted.
How does this work?
The function above hooks into the comment_text filter. Whenever a comment is displayed the function filters the text and looks for any class-less <pre> tags. If any are found, they are replaced with <pre class="nohighlight">. The addition of the nohighlight class tells Prismatic to not highlight code snippet. It’s a simple solution that just works. Learn more about the comment_text filter hook at WordPress.org.
