How to display[C,C++,JAVA,PYTHON] Code in blogpost

Have you ever excited to write a code in a blog post, but I was excited when I started  the blogging

Here are four different ways to write a code in blogpost

  1. Default editor
  2. WordPress Plugin
  3. Embed code snippet
  4. Use a syntax highlighter library[highlight.js]

We can write code in WordPress blogpost by using default editor and this is the simplest and the easiest way to do

  1. Go to your WordPress dashboard
  2. Create a new post
  3. Click on the ADD block (+) symbol
  4. Write in search box “code” then
  5. Select formatting <> code option
  6. Copy and paste your code in the write code box

Let us see one code example, how it looks like in blogpost by using the default editor

Addition of number of elements in an array with C

 code Default editor wordpress

The dumb thing about using a Default editor

Here is the first problem

the code you inserted into a default editor will not get highlighted with any color

Guess what!

The code will look simple and plain without any highlight

That’s okay!

it cripple’s the visual clarity of the code and reduces the reading speed of the reader

Here’s another one

the code which is inserted into the default editor will not fit the computer or mobile screen and you need to slide the code on the right side with a slider to view the complete code

it will crush the spirit of effortless scanning of the page

Let us use a plugin to display code in our blog and the most popular plugins are

(i)Crayon syntax highlighter [the plugin stopped functioning]

(ii) SyntaxHighlighter Evolved

Crayon syntax highlighter

Install crayon syntax highlighter by

  1. Go to WordPress dashboard
  2. Click on plugin—->ADD new
  3. Then search for plugin Crayon syntax highlighter
  4. Install and active
  5. Then go the setting of the plugin and select theme option  which you like
  6. And save changes
  7. Create a new post
  8. Click on the ADD block (+) symbol
  9. Write in search box “code” then
  10. Select formatting <> code option
  11. Copy and paste your code in the write code box
crayon syntax highlighter

Let us see code example, how it looks like in blogpost when a plugin is used instead of the default editor

Addition of number of elements in an array with C

post code

The miserable thing about using the syntax highlighter plugin in WordPress

Do you think this syntax highlighter plugins are infallible and work with no hassle as though walking the park

No! friend That’s not true

In the blissful journey of your WordPress site, this syntax highlighter plugin can paralyze you at one point in your WordPress journey

Why do you say that?

Because it is not trustworthy and not certified or authentic

 so that means  it can never give you a guarantee that it will not fail

well, imagine this suppose you build your site using a syntax highlighter plugin and have written a huge amount of code with it

guess what! If the plugin got of order

at this point you need to change the whole website code which is painful furthermore, you will waste huge chunk of time

let’s deconstruct an example

let me tell you about an incident,  3years back I was using a plugin called enlighter-customizable syntax highlighter

as time passed, I started more code with the plugin on the site

guess what happened?

Of course, the plugin stopped functioning

Yes! You guess it right,  It crippled the WordPress journey forward

Thus, this incident put me in a gloomy mood because the site got out of order and took time and effort to get back in order

Do you know? how to embed code snippets in a blog post? and This is a third way of displaying code in WordPress

We have seen how posts code displayed in WordPress by default editor also using WordPress plugin let us see how to display WordPress code snippet by embed method

In order to display WordPress code, we use an online tool called GitHub gist

Step 1

  1. Log in to your GitHub account
  2. Go to GitHub Gist
  3. Write a file for the code
  4. Copy and paste your code in Gist

Step 2

  1. Copy the embed code
  2. And paste in the paragraph of your blog with the edit as Html and
  3. publish
posts code
posts code

let us see how the syntax of the code will look like when we use GitHub Gist to display WordPress code snippets  

Addition of number of elements in an array with C

You don’t need to be a developer  to install and use highlight.js library so, don’t panic

Okay,

I can guarantee you that it would be a lot simpler than you think

Of course, installing a library in WordPress is usually done by a developer but to install highlight.js library you don’t have to write any scary code

Let’s dive in

Well, there are different ways to install a library in WordPress

 but here are the two basic methods

  1. Install it through a plugin
  2. By editing the theme file editor
Install it through a plugin

Let’s jump in, to install a plugin called wpcode

Once you finish installing the plugin then You need to copy and paste the four tags into your plugin header section and click Save changes

but wait! Where to find these four tags

You can get these four tags of the library from here the highlight.js library

That’s it! We have installed the highlight.js library on WordPress

By editing the theme file editor

Let’s see a second way to install the highlight.js library on WordPress

  1. open your WordPress dashboard to install the javascript library
  2. hover over appearance then choose theme file editor
  3.  on the right side you should see a header.php or a footer.php file
  4. You can copy and paste the previous four tags of the library as mentioned either in header.php or footer.php
  5. Make sure you know where to paste the lines otherwise you might break the theme or plugins
  6. You can paste the four lines of a library in the head tag section of the header.php and in footer.php in the html tag

How to use the highlight.js library

Let’s dive in, to use the highlight.js library

Hover over to add block then choose custom HTML and write your code in place of ……. lines

You can highlight your code by choosing a language and to do that you need to select the Aliases of languages that are mentioned on this site

Theme selection

You can change the theme by selecting the .css file names as mentioned on this site

To change the theme first, we need to change the <link> tag which we copy and paste into the header section of the WPCode plugin

Second, replace the default.min.css with 1c-light.min.css

to illustrate I used 1c light theme you can choose your own desired one from above mentioned site

Mohammed Anees

Hey there, welcome to aneescraftsmanship I am Mohammed Anees an independent developer/blogger. I like to share and discuss the craft with others plus the things which I have learned because I believe that through discussion and sharing a new world opens up

Leave a Reply

Your email address will not be published.