Formatação de código-fonte para postagens no Blog

Fiquei algum tempo sem postar código fonte no blog pois como um blogueiro recente ainda não tinha conhecimento de como fazer para formatar o código fonte de uma maneira aceitável nos posts. 

Bem, como este é um blog técnico ficou impossível continuar dessa forma e portanto hoje resolvi pesquisar uma forma de fazer formatação de códigos fonte para postagens no blog. Pesquisando um pouco decidi primeiramente experimentar mais um produdo hospedado no Google code chamado SyntaxHighlighter http://code.google.com/p/syntaxhighlighter/  . A última versão(quei irei tratar neste artigo) migrou para http://alexgorbatchev.com/wiki/SyntaxHighlighter

Minha maior curiosidade é ver como uma linguagem como Jython, que uso muito no weblogic e tenho alguns posts aqui, vai ficar formatada imagino que java deve ficar bem bacana por ser mais comum.

Segue um passo-a-passo do que fiz para fazê-lo funcionar e alguns links de postagens deste blog já formatadas com este utilitário. 

O primeiro passo é baixar o pacote do projeto no link: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

A última versão quando escrevo este é 2.0.296 .

O pacote contém um conjunto de javascript + css para formatação dos códigos.

Este conjunto deve ser disponibilizado na web para que possa ser acessado e essa foi minha primeira dificuldade, já estava pensando em fazer o upload para o ambiente que tenho contratado na locaweb(que por sinal é um excelente Hosting, não conheço melhor no Brasil) quando pesquisando a documentação do produto encontrei este link: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Hosting

O criador do produto disponibiliza um repositório na web para acesso ao css e javascript e portanto vou testá-lo, se for o caso e eu sentir problemas de performance aí sim vou utilizar a Locaweb. Para utilizar o repositório disponibilizado nem havia necessidade de baixar o pacote!!!

O padrão para utilizar o hosting do autor, conforme documentação é:  http://alexgorbatchev.com/pub/sh/[VERSION]  e todas as versões disponíveis podem ser encontradas no link: http://alexgorbatchev.com/pub/sh/

Para utilizar o formatador o primeiro passo é declarar nas postagens desejadas o seguinte trecho de código que deve ser inserido no template de página no painel de administração do seu blog . No caso do blogger ir em Layout > Editar Html e colocar o javascript entre dentro da tag head do template, sugiro colocar imediatamente antes do fechamento da tag /head> depois salvar . (Eliminei tag de abertura html pois estava tendo problemas para mostrar!!! Alguém tem uma dica???): 

link type="text/css" rel="stylesheet" href="/styles/shCore.css">
link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css">
script type="text/javascript" src="/scripts/shCore.js">
script type="text/javascript" src="/scripts/shBrushJScript.js">
script type="text/javascript" src="/scripts/shBrushBash.js">
script type="text/javascript" src="/scripts/shBrushCpp.js">
script type="text/javascript">
syntaxhighlighter.all();</script>

Importante lembrar, e o autor do produto cita isso, que os caracteres de tag html e xml devem ser corretamente substituídos:

< por &lt;
> por &gt; (ok.. ok.. esse não é obrigatório mas é uma boa prática).

Outra coisa é que se for usar o repositório disponibilizado deve-se mudar as referências passando o caminho completo, ex: 

link type="text/css" rel="stylesheet" href="/styles/shCore.css">

Fica para versão 2.0.296: 

link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css">

Lembrem-se que retirei a tag de abertura &lt 

e assim segue para todas as referências.

Feito isso deve-se usar tags pre de html para formatar os códigos desejados e definir o que o autor chama de Brush relacionando ao padrão de fontes que está sendo formatado (java, javascript, etc).
Ver lista completa em: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes

Exemplo formatação javascript: 

pre class="brush: js">alert("Hello world")/pre>

Um link em que já utilizo o recurso como referência: 

http://mmaiacupofcoffee.blogspot.com/2009/03/jme-implementacao-de-api-para.html

P.S - Para cada brush que você decidir utilizar tem um javascript diferente que deve ser carregado.

P.S2 - Implementei em todo o blog a formatação de código. Deu um trabalho considerável(umas 4 horas para revisar cerca de 30 posts, ainda bem que sou blogueiro mirim ainda!!!!) pois tive que desabilitar a quebra automática de linha em Configurações > Formatação > Converter quebras de linha tive que colocar não pois caso contrário a ferramenta de edição deste blogger colocava automáticamente quebras de linha(br) nos códigos!!!
[]s