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 */
}

source_code_formatterCom 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.

Screenshot do PreCode Code Snippet ManagerDo 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!

Partilhar no Sapo Links Partilhar no del.icio.us Partilhar no Digg Partilhar no Twitter Partilhar no StumbleUpon Partilhar no MySpace Partilhar no Facebook

Comentários Deixar um comentário

 Categorias
 Arquivo
 Projectos em Destaque
 Últimas Postas no Blog
 Últimos Comentários do Blog