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

3 ways to write code in a blogpost

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

Default editor

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

WordPress plugin

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

(i)Crayon syntax highlighter

(ii) Enlighter – Customizable Syntax Highlighter

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

Embed code snippet

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

Use a syntax highlighter library[highlight.js]

There are different ways to install it but here are two basic methods

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

Let’s jump in, to install a plug 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

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.