Embedding code on Blogger

Thank you for NYRPNZ for the following solution, and css-tricks for the text wrapping part:

By default, you can use <code> and </code> in Blogger to keep the formatting of a code intact, and to differenciate it from the rest of the text. However, with this tweak you can create a new tag that will put an eye-catching ugly gray box in your post to surround your code.

Customize your Template, go into advanced, and then select the "Add CSS" subcategory. Insert this code (By the way, this is what the code will actually look like on your site when you have finished):

pre {
  background-color: #DFDFDF;
  color: #000000;
  border: 1px dotted gray;
  width: 95%;
  padding: 10px;
/* to make the text inside the pre tag wrap: */
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Now to embed code, switch to HTML mode, paste the code into your post, then surround it with <pre><code>and </code></pre> like this:

<pre><code>
import pygame
from pygame.locals import *

print "Pygame imported without errors."
 </code></pre>

Important Note: In case you actually have <> brackets in your code, you will have to replace them with < for < signs and > for > signs. In case you actually need to embed an ampersand followed by some characters followed by a semicolon, you will need to replace the ampersand with &. Yes, this is annoying. Unfortunately I can find no better way to do this on Blogger at the moment.