How to add code snippets in blogger posts

There is no default feature in blogger to insert code snippets but you can put code snippets with some tricks. Just go through this simple article to understand how you can do it with simple steps.

image


Step 1: In post editor switch to HTML view first

image 1

Step 2: Enter below HTML code into the editor

<pre>        
        <code style="background-color: #eeeeee; border: 1px solid rgb(153, 153, 153); display: block; overflow: auto; padding: 20px;">   
              //you can write your code between this <code></code> tag     
        </code>
</pre>

After adding the above code into your blogger post's HTML view you can enter any code between 'code tag' like you can directly copy code from any text editor like visual studio, notepad++, and paste here to display code snippet into your blogger post.

You can also move CSS styles of code tag from the above example into your blogger theme code by adding one CSS class there & you can call that CSS class in any future post to display code snippet.

For example: 

CSS

.codeBlock{
    background-color: #eeeeee; 
    border: 1px solid rgb(153, 153, 153);
    display: block; 
    overflow: auto;
    padding: 20px;
}

HTML

<code class="codeBlock">
        //Write any code here
</code>

This is helpful when you are writing an article on blogger related to any coding language and you want to display code snippet for better presentation to your readers.

Thanks for reading this article, if you found this article useful then share it with your friends and share your thoughts in comment section.