How to Display Code Snippet

In WordPress Blog Post

Rajib Biswas | 6 May 2020

Table of Contents:

The Hunch!

As always, I’m back with a hunch! While I was designing the Rimikri Blog, I didn’t know that it would be that much hard to display code snippet in the blog post. I’m of course is going to write about different programs and definitely there will be many code snippets. But when I got to write one, I found it difficult to display beautiful code in the blog post. So, I got to work and here it how I sorted it through.

My Room of Requirements!

Well, here are the things that I am looking for to achieve.

  • I'm running WordPress, so it has to be an easy way to implement into WordPress, preferably a plugin.
  • I'm also using Elementor editor for designing and writing posts. So, it should be compilable with Elementor.
  • The codes must need to look beautiful with styling, color and proper indentations. A bunch of ugly code is just a disrespect to programming.
  • It has to be easy to use. I don't want to spend all my time formatting it rather writing the content.

1. Enlighter – Customizable Syntax Highlighter

Well, the first one that I tried is Enlighter – Customizable Syntax Highlighter. From the description it looks up to the mark and probably what I am looking for. So, after installing the PlugIn, it walked me through a lot of customization options.

But honestly, too many customization options may sometimes be a good thing, but for me, right now, it is a downer.

After spending a lot of time with a lot of customization, I couldn’t get to display beautiful codes in the post. If I write a code the way I usually write is an editor, I put a break code for every single new line. That’s frustrating. And amongst those tons of options, I didn’t find a way to ‘Just display it beautifully with what I wrote’ option. Maybe it was there, but sorry, I’m moving on.

2. Code Prettify

Code Prettify has a great reputation for being simple and lightweight and something that ‘Just works’ out of the box. It says that “Plugin applies code highlighting automatically to all <pre> tags on the page.”

And this is what it did to my HTML code:

Okay. I’m moving on.

3. Syntax Highlighter for Elementor

For the majority, Syntax Highlighter for Elementor could be the best option available out there. Because it injects a new Widget element in the Elementor Widget panel and just like any other Widget, you just drag and drop it to where you want it to display, place your codes and … and that’s just it. Seriously and quite literally. You have nothing else to do, and there is nothing else you can do about it. Here is how it looks.

It’s alright given the fact that it is easy, simple and robust. But as I have said earlier that you can literally do nothing else with it. So, you are stack with the design, template, font and everything else that have been given as default.

So, although it was impressive, I am moving on in search of something better.

A lot happened in the meantime

For the next two days, I have searched for a lot of PlugIns that might give me a perfect look of the codes that I’ll write. I have searched in different blogs, searched different repositories, watched different videos on the YouTube but no help. I have tried many other PlugIns and crashed my website once too. But still no help. I am not going to mention all the PlugIns that I have tried because, honestly, I don’t remember them all and now I don’t care about them either.

Back to the Game!!

It’s no time to give up and let it go. So I took the most difficult decision to go back to the first PlugIn that I tried, Enlighter – Customizable Syntax Highlighter and jump into the countless customization options to see whether I can make it work.

Long story short, I made it. But it took me almost a day to find that simple option to ‘Make it the way I want’. The option is called ‘Theme’ under the ‘Appearance’ section. 

The main reason it took me to find it is that its documentation is crazy like the way its options are. At the same time, there is very few articles regarding this PlugIn out there. Honestly, I have been here in this option before. I have chosen many other themes from its countless theme options. But every time, I was returned with a different color palette and nothing else. But as soon as I selected the ‘Theme’ as ‘Theme Costomizer’, it transformed like magic.

With is few plays, I exported the following code snippet view:

[
  {
    "index": 20,
    "title": "করোনায় টেলিমেডিসিন সেবা দিচ্ছে কুমুদিনী হাসপাতাল",
    "np": "প্রথম আলো",
    "date": "০৩ মে ২০২০, ১৫:১৪",
    "url": "https://www.prothomalo.com/bangladesh/article/1654392/"
  },
  {
    "index": 19,
    "title": "ময়মনসিংহ মেডিকেলেই করোনা ডেডিকেটেড হাসপাতাল",
    "np": "প্রথম আলো",
    "date": "০১ মে ২০২০, ১৯:১৯",
    "url": "https://www.prothomalo.com/bangladesh/article/1654104/"
  }
]

Isn’t it B-E-A-U-T-I-F-U-L? Yes, it is. You can enable other options like to view the RAW code or see it in a separate window or others. You can also customize the colors (of course you can).  But for now, I am leaving it to the way it is now.

It’s not over yet! The solution!!!

Well, it turn out that the preoblem was not with the plugin but with the Visual editor. If you paste your code block in the visual editor, it breaks, but if you paste in the Text editor, it shows the beautiful code as it is.

So, one last tip before concludion. If you get your code jumbled again with break tags, switch the editor from visual to ‘Text’ mode and it should solve the problem.

Conclusion

Well, the search for finding the best PlugIn for displaying code snippet in WordPress blog running Elementor is finally over and our winner is Enlighter – Customizable Syntax Highlighter. Paste your code in the ‘Text’ editor section under the tags of Enlighter and enjoy the beauty of code snippet in your post.

Have a good day.