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.
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:
<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 simply 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.
The following image shows how this looks inside the WordPress block editor.
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.
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.
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.
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.
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:
<?php
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="https://example.com">Demo website</a></code> <code> </code> <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.
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.
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.’
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, or </p>";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
After that, open the ‘Location’ dropdown and click on ‘Run Everywhere.’
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.
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.
Yves says
Last update 9 months ago. Non tested with last WordPress version.
WPBeginner Support says
For that not tested warning, we would recommend taking a look at our article below:
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
Admin
Seth says
Nice and very informative article. I just turned on update notifications. Good one guys.
WPBeginner Support says
Glad our article was helpful
Admin