This is largely derived this blog post from 2009, but the code was slightly borked, so here’s a fix. (If you’re looking at this on Facebook or somewhere else and it looks strange, swing by https://ideatrash.net/2012/11/putting-code-box-on-blogger-posts.html to see it properly.
If you’ve ever tried to paste a commandline or HTML into a Blogger blog, you’ve ended up with missing characters, weird linewraps, and “smart quotes” where there shouldn’t be any. This frustrates readers and makes you look like an idiot.
There’s a couple of ways to get around this.
The first is to store snippets of code in something like Pastebin (which I’ve used in the past), but a better (and more professional) option is to use GitHub. While GitHub is a bit overpowered for code snippets alone, it allows you the flexibility to do and save a lot more if you ever get into it. Make a free account, and then click on the “Gist” button at the top. You’ll get a nice place to post your code. And I think this is cool – you can also “star” the gists you use to help keep track of them later.
But what if it’s just a commandline? You’ve got some options:
NOTE: If you experience problems with brackets and ampersands, you would want to use this online urlencoder. It’s how I created the little bit of code below.
1. Ad-hoc simple (but ugly) solution:
Click the HTML tab at the top of the compose window. Then paste these lines:
<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">
YOUR CODE GOES HERE
Example of what it looks like.
2. Edit your blog’s HTML code.
a. Follow this guide to get to where you press “Edit HTML”.
b. Then Find (press CTRL+F) this: ]]></b:skin>
c. Add this code ABOVE ]]></b:skin>
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
font: 13px ‘Courier New’, Courier, monospace;
margin: 10px 0 10px 10px;
padding: 10px 10px 10px; width: 90%;
d. Click Save Template.
Then when you go to post your code, click the HTML tab, and just paste this code: