Monday, November 23, 2020
Home Blogging How to Add Syntax Highlighting in WordPress Comments

How to Add Syntax Highlighting in WordPress Comments

Do you need to add syntax highlighting in WordPress feedback? By default, WordPress doesn’t include any syntax highlighting for feedback, posts, or pages.

If you’ve gotten articles about coding or programming in your web site, then typically your customers might want to go away code examples in feedback.

In this text, we’ll present you ways to simply add syntax highlighting in WordPress feedback.

Adding syntax highlighting in WordPress comments

Why and When You Need Syntax Highlighting in WordPress Comments

WordPress doesn’t enable you to simply paste code snippets inside your articles due to safety causes.

You can present some code samples by including the code block in your submit or pages utilizing the block editor.

Adding code block

After that, you may add your code snippet contained in the textual content space of the code block.

Adding code in WordPress code block

You can now save modifications to your submit or web page and preview it to see your code in motion.

Depending in your WordPress theme, it can often be displayed in a quite simple block of textual content and with none syntax highlighting.

A simple default code block

This doesn’t look good, and it’s not very useful to your customers.

Syntax highlighting is a styling format generally used to show code. It provides line numbers and colours to spotlight code patterns which makes it simple to perceive.

Here is an instance of a code snippet with some syntax highlighting. Notice the road numbers and colours used to spotlight totally different components in the code:

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>My Awesome Website</title>
    </head>
    <body>
        <h1>Welcome to My Homepage</h1>
    </body>
</html>

Now should you run a WordPress weblog about coding or programming, then you definitely want syntax highlighting to correctly show code inside your articles.

You can also need your customers to find a way to use the identical syntax highlighting in feedback, which is able to make feedback extra attention-grabbing and interesting for customers.

That being stated, let’s check out how to add syntax highlighting in WordPress feedback, posts, and pages.

Adding Syntax Highlighter in WordPress

The simplest way to add syntax highlighting in WordPress is through the use of the Syntax Highlighter Evolved. It is tremendous simple to use and permits you to allow syntax highlighting in WordPress posts, pages, and feedback.

First, you want to set up and activate the Syntax Highlighter Evolved plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

You may see : How to Easily Hide Widget Title in WordPress

Upon activation, you want to edit the submit or web page the place you need to add code. On the submit edit display screen, click on on the (+) icon to add a brand new block after which insert the ‘SyntaxHighlighter Code’ block to your content material space.

Adding Syntax Highlighter code block in WordPress

You will now see a brand new code block in the submit editor the place you may enter your code. After including the code, you want to choose the block settings from the proper column.

SyntaxHighlighter block settings

From right here, you may choose the programming language to your code, present or cover line numbers, make hyperlinks clickable, and extra.

Once you might be completed, go forward and save your submit or web page. You can now go to your web site to see your code with syntax highlighting.

Syntax highlighter enabled in post

That was simple, wasn’t it?

However, WordPress feedback don’t have block editor help. Let’s see how your customers can use Syntax Highlighter Evolved with their feedback.

Adding Syntax Highlighting in WordPress Comments

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

The plugin comes with a number of shortcodes named in any case fashionable programming and scripting languages.

Simply wrap your code round sq. brackets with the language identify. For instance, in case you are going to add PHP code, then you’ll add it like this:

[php]
<?php
non-public operate get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]

Similarly, should you wished to add an HTML code, then you’ll wrap it across the HTML shortcode like this:

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

[/html]

Adding Syntax Highlighting Notice in Comment Form

While it’s simple to use syntax highlighting with shortcodes, the issue is that your customers wouldn’t know that they’ll try this.

Luckily, there’s a fast approach to allow them to know that they’ll use syntax highlighting with shortcodes.

For that, you’ll want to add a customized code snippet to your WordPress web site. If you haven’t finished this earlier than, then check out our information on how to add customized code in WordPress.

You will want to add the next code in the code snippets plugin, capabilities.php file, or a site-specific plugin.

1
2
3
4
5
6
7
8
9
function gyanhigyann_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', 'gyanhigyann_comment_text_before');

This code merely shows a discover simply earlier than the remark discipline in the WordPress remark type. However, it doesn’t show the discover for logged in customers.

You can now open a brand new browser window in the incognito mode or just sign off of your WordPress admin space. After that, you may go to any submit in your weblog to see thee syntax highlighting discover in motion.

Adding syntax highlighter notice before comment field

You can even add customized CSS to type this textual content. We have used the next customized CSS code on our demo web site, be at liberty to use this as a place to begin.

1
2
3
4
5
p.comment-notice {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

We hope this text helped you add syntax highlighting in WordPress feedback. You can also need to see our information on how to enable customers to add photographs in WordPress feedback and a few helpful suggestions to type WordPress remark type.

 

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

50 Best Online Jobs From Home For Students – Earn 20K PM

In latest years, the alternatives for online jobs from home for students have gained great reputation. This is as a result of many of the...

Best Answers to the Question “Why should you be hired for this Internship?”

What is the greatest approach to ace an internship interview? Especially for a more energizing who has by no means appeared for a job-related...

Does Instagram Notify You if Someone Screenshots Your Story?

When Snapchat first burst on the scene, there have been loads of individuals very completely happy concerning the prospect of sending pictures to people...

How to Change Background Color on Instagram Story

It's arduous for me to recollect Instagram earlier than the tales characteristic was launched — it is a simple possibility for sharing updates and...

Recent Comments