26 de mar de 2009

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

3 comentários:

Fred Belisario disse...

Bom esse plugn.
Mas tive um problema, ele acaba escrevendo os
nos meus códigos, alguma idéia pra isso?
http://fredbelisario.blogspot.com/2010/10/teste-de-formatacao.html

abraços

Fred Belisario disse...

Muito bom esse script, mas ele não exclui os
dos códigos, alguma idéia pra isso?
abraços
http://fredbelisario.blogspot.com/2010/10/teste-de-formatacao.html

Fred Belisario

mmaia disse...

Fred,

na verdade quando vc for utilizar vc pode colar o código java direto do editor java dentro da tag "pre" que configura os códigos. Tenho vários exemplos que utilizam código java, html, xml aqui no meu blog. O que vc precisa fazer é definir um novo tipo de brush diferente. que também deve estar registrado no template do seu blog, para que funcione direitinho.

[]s