How to add code snippets in blogger posts

First of all this kind of question arise when young blogger kick their passion in blogger field. When new blogger write 5 or 6 post then ready to write next 7th post but now this post contains code chunks then young blogger go in anxiety because there is no tool and plugins available in blogger for adding code snippets directly to blogger post but when we compare this situation to WordPress then lots of plugins are available to execute this task sounds good and listen for WordPress this platform gave one special tool to decide admin whether this block is code chunk, text box, image box and much more. Then question arise how to add code chunk in blogger then yes this post clear your all doubts and give you helping hand to execute this query.

All blogger face this common problem and what they all do see, they do lot of research on google then they find multiple solutions but none of them works then they all use stackoverflow, quora and many more IDE to just copy the code and paste in blogger post but this solution is also not working and snippets gets mangled then they do research again but this time one solution works which is offcourse highlightjs. Trust me highlightjs works for me and this above story belongs to my research. Also this platform supports 95 styles and 189 languages but this data is not static probably this data changes to new but from writing this post these are current data for sure if you want to know more about styles and languages then click on this link.

I use hilite website too but this platform is not satisfying your need, output of hilite is pretty desirable but when after pasting code to blogger than doesn't give this same output to my blogger post. By using hilite sometimes function of code is executed but i want code to present in box this problem arise because hilite doesn't convert special character like "<" to "&lt", etc. I also give one website below that

convert all special symbols to XML form.

State of mind

In this post, am using third party code to add code snippets in blogger post and I make two section, First section contain tutorial to add third party library then In second section will give example how to implement this task in blogger post. If we consider blogger then officially there is no function or tool embedded in platform till date but as compare to WordPress this platform will have millions of tools and plugins. Then how to resolve this issue then don't worry Highlightjs able to handle this task.

Highlightjs is a syntax highlightning library which use JavaScript and CSS code to high light code chunks in blogger. As already mentioned about styles and languages supported by this third party library.

Steps to add third party library in blogger

As already said officially there is no pre-defined tool available in blogger so third party library will do this task to add code snippets in blogger post. Guys do follow this simple steps that i took to add this code from Highlightjs.

Section 1: 

As said earlier, I divide this task in two section first section give you idea that how to add third party library from highlightjs then will give you example how to add code in blogger post. Also keep in mind that if your code contain special character then also give you suggestion how to tackle this kind problem by using third party website so be calm.

Step1: Open blogger then go and select theme option which is contained at left list of screen so simple click this option and follow this below screenshot.

Step2: Now after hitting theme option then it will redirect you to another page now this page will have one button called customise so what you have to do is simple click this button and follow below screenshot for more help.

Step3: Now after clicking on customise option then it will redirect you to list first of all keep in mind that take backup of your layout which is in format of XML and now click on edit Html option then it will redirect you to IDE format form more help see this screenshot.

Step4: Last step is just add this syntax highlighting third party library paste this code below to your head tag and after that hit on floppy like icon to save your all work. In my case I use GitHub Style if you want more styles then there are 95 style present at Highlighjs just click on link and  use it. When you use styles then don't change default link means if you want to use atom-one-dark-reasonable this style then simple replace default to atom-one-dark-reasonable that's it. 

Now see the JavaScript working first highlight.js will load then github style will load and lastly function call initHighlightingOnLoad will execute. How nicely this all will done with small library so follow all steps carefully.

<!-- below is used to highlight code in blogger-->
    
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css' rel='stylesheet'/>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js'/>

<script>hljs.initHighlightingOnLoad();</script>

Step5: Now after adding third party library to blogger now time to use <pre><code></code></pre> tag simple use this below tag to your blogger post by writing code snippet directly inside code tag but keep in mind that special character will make problem then will give third party website to resolve this issue.

Section 2:

In this section will give you example how to implement this task in blogger post so this 4-5 steps and done.

Step1: Open your blogger then click on new page button and add new page In my case am using demo title and now click on pencil like icon, Simply follow this screenshot.

<pre><code class="html">
/* Paste your code here */
</code></pre>

Step2: Now click on Html view to write your code in blogger.

Step3: No use pre tag which is given below simple use this code anywhere in your post depending upon your need.

Step4: See for instance I have C++ code with me and want to add to blogger then simple paste this code inside code tag.

But wait you all stuck with one problem that I already mentioned that if your code contains special symbols then this third party library will not identify this symbol so first replace all your symbols to XML form.

#include <iostream.h>

int main()
{
    int a=10,b=4,sum;
    sum = a + b;
    
    cout << "Sum of two number: "<< sum;

    return 0;
}

Above this "<" symbol is not recognized by third party library so first we have to change this symbol see this below screenshot.

Now see the output after writing this code to blogger post then iostream.h will going to hide so how to resolve this issue Firstly see this screenshot.

Now how to resolve this issue then don't worry one website will help to convert all special symbol to XML form which is mysuperblist this website replace all your special symbol whether it is greater than or small then to XML form so do visit this website or you can also manually change all special symbol to XML form. 

Simply paste your code to mysuperblist and copy your parsed code and now paste to your blogger post Then you are done see this parsed code I got from this website.

#include <iostream.h>

int main()
{
    int a=10,b=4,sum;
    sum = a + b;
    
    cout << "Sum of two number: "<< sum;

    return 0;
}

 

Now see this wonderful output after pasting parsed code to blogger post I took this code and directly paste inside code tag.

Step5: Congrats you successfully add code snippet in blogger.

Wrapping Up

I hope you now know how to add code snippets in blogger. If you find any difficulty like unable to follow this tutorial then drop a message, will assist you further.

Don’t forget to share this post with your blogger friends.