Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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 will 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, making it easier to read and understand.

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

		<title>My Awesome Website</title>
		<h1>Welcome to My Homepage</h1>

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

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

Adding a code block to the WordPress block editor

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

The following image shows how this looks inside the WordPress block editor.

Adding code in WordPress code block

You can then go ahead and publish or update the page. Depending on your WordPress theme, the code will usually be displayed in a simple block of text without any syntax highlighting.

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

A simple default code block

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

Visitors may also want to use the same syntax highlighting in comments so that they 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 a SyntaxHighlighter Code block in WordPress

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

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

SyntaxHighlighter block settings

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

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

Syntax highlighter enabled in post

Adding Syntax Highlighting in WordPress Comments

Syntax Highlighter Evolved allows visitors to add code in their comments, but that code needs to be wrapped in shortcodes.

Syntax Highlighter Evolved comes with shortcodes named after all the popular programming and scripting languages. This means the commenter 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 you’d use the following:

private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;

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

<a href="">Demo website</a></code>

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.

For that reason, you need to add some text letting visitors know about your syntax highlighting shortcodes.

Adding syntax highlighter notice before comment field

You can do this by adding a custom code snippet to your WordPress site.

Often, tutorials ask you to add code to your theme’s functions.php file. However, we don’t recommend this method for anyone but advanced users. 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 instead. 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.

Adding a code snippet using WP Code

Here, you will 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.’

Adding a custom 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,  or </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 are ready to scroll to the top of the screen and click on the ‘Inactive’ toggle so that it changes to ‘Active.’

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

Saving your PHP snippet

This code simply shows a notice above the comment field in the WordPress comment form. However, you won’t see this text while logged in to your account, so you will 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.

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 picks for 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4 CommentsLeave a Reply

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.