Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
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.

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

Welcome
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 »
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »
Thoughts
DIY: Monitor File Changes via Cron working perfectly for over a decade.
Mastodon social is a trip. Glad I found it.
As a strict rule, I never use cache plugins on any of my sites. They cause more problems than they solve, imho. Just not worth it.
Currently on a posting spree :)
6 must come before 7.
My top three favorite-to-write coding languages: CSS, PHP, JavaScript.
If you’re not 100% sure that you can trust something, you can’t.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.