How to add code snippets in blogger posts

How to add code snippets in blogger posts

Reference: https://www.codingtricks.in/2020/11/how-to-add-code-snippets-in-blogger.html

Step 1: In post editor switch to HTML view first

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.