How To Display Code In Blogger Posts?

In this article, we going to learn how you can show programming code in your blogger post. The simplest way to do this is by writing your code on the post editor. But the problem is this code is shown in a post in a very bed look as you can see in the image.

So let's learn how you can show your code in a better way. For this, you need to give some CSS style to your code. First, go to HTML editor, then add class to your code. Then give CSS code for the class in style tag! As you can see down below:

<style>
.myCode
{
 /* CSS For Code */
.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px &#39;Courier New&#39;, Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }
}
</style>

<div class="myCode">
<img src="myImg"/>
</div>

Now your image code will look like this:

So if you want this style for programming code every time you write the post. For this, add your style in "Theme", then you don't need to write it again in every post. For adding your style in "Theme" go to "Theme" section, click on "Edit HTML". Add you CSS code in style tag then click "Save". Now when you write any post you just add "code" class on programming code no need to give style again. Then it will work for all your posts.

Hope this helps you if you have any query please do comment below:)