Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

Disable Highlighting in Comments with Prismatic WordPress Plugin

Prismatic Icon 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..

Important: When I say 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.

About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
Banhammer: Protect your WordPress site against threats.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.