Posting Blocks of Code on Google Blogger

This blog is hosted by Google.
In the past I've considered the pros and cons of using Google's Blogger and why I chose Blogger for this blog.
This article looks at how snippets of code can be neatly displayed within posts using a few lines of CSS.

I opted for the Contempo Aqua theme for this blog, but regardless of the theme you decide to install it's probable that you'll want to customise its appearance to some degree.
I decided to keep things simple and not to edit the HTML content of the theme's template.
The few changes I've made have been achieved by the addition of CSS.

To add CSS, starting from the Blogger dashboard, follow these steps...

• Click Theme.
• Under 'My theme' click Customise.
• From the resulting menu choose Advanced.
• Use the down arrow then click Add CSS.
• Insert and then Save your CSS code.

From time to time I'll provide explanations of modifications that have been made to my blog through the addition of CSS... and here's the first.

Bloggers may on occasion wish to include snippets of code within their posts.
It makes sense to have blocks of code neatly presented and readily identified within the body of posts.

It could be that the Blogger team will one of these days add an editor option (button) to facilitate the insertion of blocks of code.

In the meantime it can be done by adding CSS.

This is how I present a block of code.

.demo {
   background-color: white;
   color: black;
   padding: 10px 25px;
}

To have blocks of code in your blog posts appear in a similar way there are two steps.
Firstly, add the following CSS in the manner described above.

.codesnippet {
  background: white;
  border: solid black;
  border-width: 1px 1px 1px 10px;
  color: black;
  font-size: 13px;
  font-family: 'Courier New',monospace;
  line-height: 16px;
  padding: 6px 10px 6px;
  width: 95%;
}

Of course the CSS can be edited to suit the style of your own blog.
You will notice that it sets the fixed-width font to be used for your code snippet as Courier New.

The next step is to add the code you wish to display within your blog post.

The Blogger post editor has an option to switch between HTML view and Compose view.
Select the HTML view and add the following but substituting the actual CSS snippet you intend to feature.

<div class="codesnippet"><pre>
   Your Own Code Snippet Here !                
</pre></div>

So that's it !
Use the CSS and HTML markup above to display tidy blocks of CSS coding within your blog posts.

_________________________________

The following observations may be helpful.

The <pre> element in the above code preserves white space and line breaks within the code snippet. Your inserted code appears precisely as input to the HTML view of the editor.

You will see above that there's a line break preceding the text 'Your Own Code Snippet Here'.
It will be rendered on the blog post.
If you are pernickety (like me) you may want to remove that line break. To do so start the text of the inserted code on the same line as the <pre> element.

It's also worth noting that <pre> doesn’t allow text to wrap. This may be more apparent on mobile screens.

There are CSS solutions, but I decided simply to insert a line break into the text of the displayed code should the length of any line suggest it could be truncated.

If displaying HTML as your code snippet (as opposed to CSS) within a block, things have to be done slightly differently.
You must use HTML 'entities' in place of the < and > characters which start and end HTML elements.
If you don't do so, the code you insert will be interpreted as actual HTML within your post.

An easy way to do this is firstly to create a code block within the HTML view of the editor.
It helps if you insert some temporary text within that block such as 'My Code'.
Next switch to Compose view and find that entry.
Replace the text 'My Code' by pasting the HTML code you wish to display within that newly created block.
You will see that any instance of the character < is converted to &lt; while > becomes &gt; in the HTML view of the editor.

I think there will be those who recommend the use of both the <pre> and <code> elements in presenting blocks of code.

Like this....

<div class="codesnippet"><pre><code>
   Your Own Code Snippet Here !                
</code></pre></div>

Possibly it is preferable, but I'm unsure.
Does the omission of <code> cause a problem?
I've come across differing opinions, so would appreciate any thoughts on this.

Looking online I can see there are a variety of approaches to inserting blocks of code within blog posts and I readily admit to not being a CSS expert... but hopefully what I have posted is helpful.
Your comments as always are welcome.