Utilizando Google Code Prettify no Blogger/Blogspot

Bom dia amigos!
Vou lhes contar um segredo. Sempre quis ter um blog para poder dividir o que eu venho aprendendo com meus colegas de profissão. Pois bem, chegou a hora! Vou iniciar minha jornada de posts nesse blog ajudando uma amiga... (Esse é pra Fabiana.)
Quando se deseja fazer posts sobre assuntos relacionados a área de TI sempre surge, logo de cara, o primeiro obstáculo. Como inserir código de fonte de maneira legível nos seus posts? Eu tenho uma respostas muito simples na ponta da língua: "Use ferramentas de terceiros."
Considerando então que você vá seguir o meu conselho, temos duas opções: Syntax Highlighter e Google Code Prettify. A minha escolha não será muito criteriosa, mas considerando que já estamos utilizando uma ferramenta da Google (blogspot) vamos escolher o Google Code Prettify que pertence aos mesmos desenvolvedores, prezando pela compatibilidade.
A instalação é muito simples.
Acesse o painel de edição do seu blogspot e faça o seguinte caminho:
Painel > Design > Editar HTML
Em seguida procure a tag "head" e na linha anterior ao seu fechamento insira o seguinte código.

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript" />
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(prettyPrint);
</script>

Pronto! Simples assim! Muito fácil né?
Agora para usar o Prettify o basta inserir seu código dentro da tag pre ou code passando no atributo class o valor "prettyprint lang-[linguagem]". Exemplo:

<pre class="prettyprint lang-html">...</pre>
<code class="prettyprint">...</code>

É tão simples que muitos podem não entender como uma alteração tão pequena no código trás um resultado tão significativo. Vou explicar cada trecho de código para um melhor entendimento.
Linha 1:

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />

Importa a folha de estilho, que é onde estão especificados como o navegador deve formatar o código.
Linha 2:

<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript" />

Importa o arquivo javascritp que contém o algorítimo usado para processar o seu código de fonte.
Demais linhas:

<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(prettyPrint);
</script>

O restante do código é um javascript que server para acrescentar a função prettyPrint() no onload da sua tag body. Isto evita que você sobrescreva outras chamadas que já estejam sendo feitas antes de você adicionar o Prettify.
E assim encerro meu primeiro post. Espero ter ajudado.
Abraço a todos.

fonte: http://code.google.com/p/google-code-prettify/, http://stackoverflow.com/questions/1852537/how-to-use-prettify-with-blogger-blogspot