Vladimir MartonIf you’re using default WordPress comments and you’re missing highlighted code snippets inside of them, this tutorial will help you. Before I start to explain, you should know that is it not possible by default and it requires your users to wrap their code in <pre> and </pre> tags. Even though there might be <code> and <pre> tags available for comments code snippets by default, they do not look very good. After following steps from this tutorial, your code snippets in comments will look like this:
Prerequisites
In order to make the code snippets work, we will use a WordPress plugin called Enlighter – Customizable Syntax Highlighter. It is available on WordPress plugin page on this link: https://wordpress.org/plugins/enlighter/. This plugin adds code highlighting to your WYSIWYG editors, so you can easily add a code snippets wherever on your page. After you install this plugin, go to Enlighter menu and allow comment settings.
I’m not entirely sure about the Enable comments-excerpt setting, but it causes no harm to allow it.
It is also important that you’re using the default WordPress comments. It might be possible to implement this solution to other commenting systems too, although I have not tried it.
Before you start
… you should know that this tutorial is basically just a workaround. It is not the best way to reach the required outcome, but I spent a lot of time searching for a solution to this problem and I did not get anywhere. Although it is not the perfect approach, it works nicely. The only additional thing you have to do is to ask your users to wrap their code snippets with <pre> and </pre> tags, otherwise this approach won’t work.
Highlight code snippets
First things first, you have to find where your <?php comment_text(); ?> command lies. First of all, you should open your website, open any post with a comment in it and analyze the element. This will give you an overview of a class or id which defines this element, so you can look for it in your theme. One of my testing WordPress instances has a Twentyseventeen theme active. There is a testing comment generated by WordPress which I’m gonna use to find this element’s properties (use key F12 to open Developer Tools in Chrome/Firefox and look for the element).
Now that we know that the comment text is encapsulated between a div with class comment-content, we can look for it in the PHP files. I recommend using Total Commander (https://www.ghisler.com/) – it is an old school 2-panel file manager, but it has some powerful tools which make me use it all the time. Go to Commands -> Search, set Search in to your root www directory, check box Find text and insert <div class=”comment-content”> in the field. Search result window will show you appearances of the searched text. It might take a while, because it goes through content of every single file, but it’s totally worth it.
Open the file. If there is more files than just one, it’s up to you to discover which of them is the one that makes sense. If you’re using a custom theme (Twentyseventeen is a WordPress default), the target file will most probably lie somewhere inside wp-content/themes/your_theme/ directory.
In the file, look for the string <div class=”comment-content”>. This div element should encapsulate a PHP function which renders the comment text on screen.
<div class="comment-content"> <?php comment_text(); ?> </div><!-- .comment-content -->
It does not matter in what file you found this [highlight] comment_text() [/highlight] function, as long as it’s the one that prints out the comment. The main problem here is that this function does not only return the comment text, but also gives you HTML elements to wrap it around with. Although, there is one more function, called get_comment_text(), so we will use this one instead.
<div class="comment-content">
//<?php comment_text(); ?>
$orig = get_comment_text();
echo str_replace("<pre>", "<pre class='EnlighterJSRAW'>", $orig); ?>
</div><!-- .comment-content -->
By adding the code above, we replace each occurrence of tag <pre> with a new pre tag of Enlighter plugin’s class. It depends on you which class you choose. You can see all supported themes here: https://enlighterjs.org/Theme.Enlighter.html.
Ask your audience to wrap code in <pre> tags
The only thing left to do is to let your audience know that they should use <pre> and </pre> tags when posting a code. I’m using this approach on my website as well, so I will show you how to get there.
WordPress provides you with the comment’s comment_notes_before and comment_notes_after. It depends on what you would like to use, but here we will use an after-note. Open settings to these properties are usually found in wp-includes/comment-template.php, but you can again use Total Commander’s Search view and look for text ‘comment_notes_after’ => ‘ which will give you a file where this parameter will be set.
I wrote my after-note as described below (don’t forget the comma at the end):
'comment_notes_after' => '<i class="fa fa-exclamation-circle" aria-hidden="true" style="color: #008BBE"></i><span style="font-size: 13px;">Please, format your code snippets by capsulating them between </span><span style="color: #DD9227; font-size: 15px;"><pre></pre></span><span style="font-size: 13px;"> tags.</span><br> ',
This line has some styles which you can of course change and it also uses an icon from font awesome, which you can change by looking up your icon first (http://fontawesome.io/icons/) and rewriting the <i> tag. The result of the comment form should now look this way:
And after inserting a text with some code in it wrapped in <pre> and </pre> tags, this is what’s shown as a result.
And that is basically all. I hope you achieved what you hoped fore. This tutorial does not have to be universal. It depends a lot on theme and installed plugins which could interfere with Enlighter, but I think in most cases it should be doable. Good luck!
