How to Add Syntax Highlighting in WordPress Comments

Do you want to add syntax highlighting in WordPress comments?

By default, WordPress does not come with any syntax highlighting for comments, posts, or pages. This can be a big problem if you write articles about coding or programming on your WordPress website.

In this article, we’ll show you how to easily add syntax highlighting in WordPress comments.

Adding syntax highlighting in WordPress comments

Why and When You Need Syntax Highlighting in WordPress Comments

Syntax highlighting is a styling format commonly used to display code. It adds line numbers and colors to highlight code patterns which makes it easy to understand.

Here is an example of a code snippet with some syntax highlighting. Notice the line numbers and colors used to highlight different elements in the code:

<html>
	<head>
		<title>My Awesome Website</title>
	</head>
	<body>
		<h1>Welcome to My Homepage</h1>
	</body>
</html>

However, for security reasons WordPress does not allow you to just paste code snippets inside your posts and pages.

Instead, you can show code samples by adding the code block using the block editor.

After creating the block, you can add your code snippet inside the text area.

All of the code within this block will be shown on your website as plain text.

Depending on your WordPress theme, the code will usually be displayed in a very simple block of text without any syntax highlighting.

This does not look good, and it’s not very helpful for your users, as you can see in the following image.

If you run a WordPress blog about coding or programming, then you need syntax highlighting to properly show code inside your articles.

You may also want your users to use the same syntax highlighting in comments, so people can talk about your code and share their own snippets. In this way, syntax highlighting can make comments more interesting, engaging, and helpful.

That being said, let’s take a look at how to add syntax highlighting in WordPress comments, posts, and pages.

Adding Syntax Highlighter in WordPress

The easiest way to add syntax highlighting in WordPress is with the Syntax Highlighter Evolved plugin. It is super easy to use and allows you to enable syntax highlighting in WordPress posts, pages, and comments.

First, you need to install and activate the Syntax Highlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to edit the post or page where you want to add code. On the post edit screen, click on the (+) icon to add a new block and then add the ‘SyntaxHighlighter Code’ block to your content area.

Adding Syntax Highlighter code block in WordPress

You will now see a new code block where you can enter your code.

After adding the code, take a look at the block settings in the right-hand menu.

From here, you can select the programming language for your code, show or hide line numbers, make links clickable, and more.

When you’re finished, go ahead and save your post or page. You can now visit your website to see your code with syntax highlighting.

That was easy, wasn’t it?

However, WordPress comments don’t have block editor support so this method won’t work in the comment section. With that being said, let’s see how you can use the Syntax Highlighter Evolved in your website’s comments.

Adding Syntax Highlighting in WordPress Comments

Syntax Highlighter Evolved is enabled for WordPress comments by default. However, in order to use it in the comments, the code needs to be wrapped in shortcodes.

Syntax Highlighter Evolved comes with several shortcodes named after all the popular programming and scripting languages.

The person commenting simply needs to wrap their code in square brackets containing the language name. For example, if you wanted to post a comment containing PHP code, then would use the following:

[php]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]

Similarly, if you wanted to post some HTML code as a comment, then you would need to wrap it in the HTML shortcode:

[html]
<a href="https://example.com">Demo website</a></code>
<code>
</code>
<code>[/html]

Adding Syntax Highlighting Notice in Comment Form

While it’s easy to use syntax highlighting with shortcodes, the people who visit your website won’t know how to do that.

Luckily, there is a quick way to let visitors know about your syntax highlighting shortcodes.

You simply need to add a custom code snippet to your WordPress site. Normally, you would need to add custom code snippets to your theme’s functions.php file.

However, we don’t recommend this method for anyone but advanced users, and even then, a small mistake in your code could cause a number of common WordPress errors, or break your site completely.

That’s why we recommend using WPCode. It is the easiest and safest way to add custom code in WordPress without having to edit any core WordPress files.

The first thing you need to do is install and activate the free WPCode plugin on your website. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet.

Here, you’ll see all of the ready-made snippets that you can add to your WordPress website.

Since we want to add our own snippet, hover over ‘Add Your Custom Code,’ and then click ‘Use snippet.’

Creating a custom code snippet using WP Code

To start, enter a title for the custom code snippet. This can be anything that helps you identify the snippet.

After that, open the ‘Code Type’ dropdown and choose ‘PHP Snippet.’

Now, simply paste the following snippet into the code editor:

function wpbeginner_comment_text_before($arg) {

$arg['comment_notes_before'] .= "<p class='comment-notice'>You can use shortcodes for syntax highlighting when adding code. For example, [php][/php] or [html][/html]</p>";

return $arg;

}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

After that, open the ‘Location’ dropdown and click on ‘Run Everywhere.’

Inserting the PHP snippet across your website

Then, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle so it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the snippet live.

This code simply shows a notice above the comment field in the WordPress comment form. However, it does not display the notice for logged in users, so you’ll need to open a new browser window in incognito mode or log out of your account.

After that, you can visit any post on your blog to see the syntax highlighting notice in action.

Adding syntax highlighter notice before comment field

We hope this article helped you add syntax highlighting in WordPress comments. You may also want to see our guide on how to make money online blogging with WordPress and our expert pick of the best contact form plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.