WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add Syntax Highlighting in WordPress Comments

How to Add Syntax Highlighting in WordPress Comments

Last updated on July 14th, 2020 by Editorial Staff
142 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

If you have articles about coding or programming on your website, then sometimes your users may want to leave code examples in comments.

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

WordPress does not allow you to just paste code snippets inside your articles due to security reasons.

You can show some code samples by adding the code block in your post or pages using the block editor.

Adding code block

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

Adding code in WordPress code block

You can now save changes to your post or page and preview it to see your code in action.

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

A simple default code block

This does not look good, and it is not very helpful for your users.

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>

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

You may also want your users to be able to use the same syntax highlighting in comments, which will make comments more interesting and engaging for users.

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 by using the Syntax Highlighter Evolved. 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 insert the ‘SyntaxHighlighter Code’ block to your content area.

Adding Syntax Highlighter code block in WordPress

You will now see a new code block in the post editor where you can enter your code. After adding the code, you need to select the block settings from the right column.

SyntaxHighlighter block settings

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

Once 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

That was easy, wasn’t it?

However, WordPress comments don’t have block editor support. Let’s see how your users can use Syntax Highlighter Evolved with their 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 around shortcodes.

The plugin comes with several shortcodes named after all popular programming and scripting languages.

Simply wrap your code around square brackets with the language name. For example, if you are going to add PHP code, then you will add it like this:

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

Similarly, if you wanted to add an HTML code, then you will wrap it around the HTML shortcode like this:

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

[/html]

Adding Syntax Highlighting Notice in Comment Form

While it is easy to use syntax highlighting with shortcodes, the problem is that your users wouldn’t know that they can do that.

Luckily, there is a quick way to let them know that they can use syntax highlighting with shortcodes.

For that, you’ll need to add a custom code snippet to your WordPress site. If you have not done this before, then take a look at our guide on how to add custom code in WordPress.

You will need to add the following code in the code snippets plugin, functions.php file, or a site-specific plugin.

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');

This code simply displays a notice just before the comment field in the WordPress comment form. However, it does not display the notice for logged in users.

You can now open a new browser window in the incognito mode or simply log out of your WordPress admin area. After that, you can visit any post on your blog to see thee syntax highlighting notice in action.

Adding syntax highlighter notice before comment field

You can also add custom CSS to style this text. We have used the following custom CSS code on our demo site, feel free to use this as a starting point.

p.comment-notice {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

We hope this article helped you add syntax highlighting in WordPress comments. You may also want to see our guide on how to allow users to upload images in WordPress comments and some handy tips to style WordPress comment form.

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.

142 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

2 Comments

Leave a Reply
  1. Seth says:
    Jul 15, 2020 at 5:09 am

    Nice and very informative article. I just turned on update notifications. Good one guys.

    Reply
    • WPBeginner Support says:
      Jul 15, 2020 at 10:56 am

      Glad our article was helpful :)

      Reply

Leave a Reply Cancel 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
FloThemes
FloThemes Coupon
Get 20% off on FloThemes theme's beautiful WordPress photography themes.
ChurchThemes.com Coupon
Get 20% OFF on ChurchThemes.com premium WordPress themes and plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.