Num site em que página sim, página não vai ter código, é necessária uma forma de o apresentar convenientemente: com o espaçamento correcto, colorido, preferencialmente diferenciado por linguagem, e, já agora, com mais alguns extras, como a numeração das linhas.

A questão do espaçamento é facilmente resolvida envolvendo o código em tags <pre> </pre>. No entanto, dando de barato a questão das cores do código por enquanto, existe um problema muito maior: o espaçamento é mesmo respeitado! Se não colocarem nenhuma quebra de linha  - e a maior parte do código tem linhas bastante compridas – a caixa de código correspondente vai crescer por ali fora… E nem vale a pena fixar a largura das <pre> por CSS: o código vai simplesmente saltar fora da caixa!

Como é habitual, o Google eventualmente devolveu a solução a este problema, via blog do Tyler Longren (e uma adenda do Markku Laine). Os estilos necessários para forçar as quebras de linha dentro das <pre> é complexo, porque nem todos os browsers aceitam da mesma maneira (que surpresa…) e, precisamente por causa disso, a CSS não é standard compliant. A solução não me agradava nem um bocadinho, mas ainda a usei… durante um dia. Seja como for, porque pode dar jeito a alguém, cá vai (com os comentários traduzidos para português):

pre
{
  overflow-x: auto; /* Usar barras de deslocamento; apenas necessário para Firefox 2 */
  white-space: pre-wrap; /* standard compliant na CSS 3 (ainda não em vigor) */
  white-space: -moz-pre-wrap !important; /* vários browsers Mozilla, desde 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5-7 , não necessário no 8 */
}

Com isto fora do caminho, bastava pintar a coisa pela linguagem usada et voilá. A primeira solução que testei foi o Source Code Formatter, de Amer Gerzic, para o Windows Live Writer. Como podem ver na imagem, a solução é interessante, mas tinha vários problemas: o código inserido tinha os estilos embebidos – isso dava muito código repetido ao longo de vários posts com código; a caixa exterior era feita também com um <pre> (com vários <pre> dentro com as linhas), o que não é XHTML válido, levando a que a maior parte dos browsers partisse esse <pre> exterior; mesmo com a solução das quebras de linha explicada acima, as ditas ainda deixavam imenso a desejar; a dificuldade para copiar o código – levar os números das linhas atrás ainda era o menos, o pior era o Firefox (pelo menos o 3) obrigar a copiar linha por linha! Completamente fora de questão…

Depois de testar várias soluções, acabei por ficar numa solução bipartida: metade generalista para todo o site e outra metade embutida no Windows Live Writer para maior facilidade ao escrever posts. A parte generalista foi fácil, é só usar o fenomenal Syntax Highlighter de Alex Gorbatchev, que é mesmo… fenomenal, tanto ao nível da costumização (CSS’s externas), como das linguagens suportadas (21 incluídas, e fazer outras é facílimo). Este projecto ainda existe no Google Code, mas é uma versão descontinuada.

Do lado do Windows Live Writer, a coisa piou mais fino… Experimentei vários plugins que supostamente funcionariam com o Syntax Highlighter mas, por distracção (e devido ao avançado da hora), era tudo para a versão descontinuada. Finalmente, encontrei o também fantástico PreCode Code Snippet, que, esse sim, suporta o Syntax Highlighter 2. Como podem ver na imagem, a interface é muito simples – o look futurista era dispensável – e só é pena não pintar a manta logo ali… O que é compreensível, visto que depende de JavaScript.

A única coisa que, sinceramente, não me agrada, é a passagem final pelo JavaScript, o que pode fazer com que internautas sem suporte a JavaScript vejam o código sem cores (e com o problema das mega linhas nos <pre>). Mas não me preocupo por aí além: hoje em dia, andar por aí com o JavaScript desligado, é preciso um nível de paranóia soviet style…

Concluíndo: foi uma luta e peras, mas sem dúvida que valeu a pena – o Syntax Highlighter vale bem mais do que aquilo que se paga por ele (que é… tipo… zero). O autor aceita doações – se usarem isto, paguem um copo ao homem…

...and while being free of charge is a work of one man who needs beer, ie if you are using SyntaxHighlighter, please donate.

… e apesar de ser gratuito, é o trabalho de um homem que precisa de cerveja, isto é, se estão a usar o SyntaxHighlighter, por favor, doem.

Abraços!