25 de novembro de 2008

Listagem de Códigos no Blogger com SyntaxHighlighter


Quem acompanha este blog, sabe de uma postagem que eu fiz sobre como usar o Pygments para formatar códigos-fonte no Blogger. De fato, eu usei este método por um bom tempo, que foi o suficiente para encontrar falhas, que tornavam muito tedioso o processo de inserir códigos formatados no blog. Dentre estas falhas, creio que as principais fossem a perda de indentação e blocagem no código, o que me obrigava a revisar e reformatar todo o código após a postagem. Dessa forma, o método usado não estava sendo tão vantajoso para mim e isto me incentivou a procurar métodos diferentes para solucionar o problema.

Depois de algum tempo eu encontrei o Pastie, que "terceirizava" a formatação do código: eu entrava no site oficial, postava o código lá, com detalhes sobre a linguagem usada e o tema para colorização e pegava um link, que usava no meu blog para chamar o código formatado. O resultado, na página do Pastie, aparecia perfeito: código formatado, sem quaisquer perdas, mas quando comecei a usá-lo, logo percebi que havia perda de blocagem (linhas em branco), além de uma leve perda de desempenho do blog (parecia que as chamadas de script do Pastie pesavam bastante o blog). Além disso, havia o problema de eu não ter controle sobre os meus códigos, pois caso houvesse um problema no Pastie, poderia perder meus dados permanentemente.

Algumas horas depois de adaptar todo o blog para o Pastie e perceber todos os seus problemas, eu encontrei o SyntaxHighlighter. Na verdade eu já o havia encontrado na época que comecei a usar o Pygments, mas não havia conseguido instalá-lo, por isso tinha desistido de usá-lo. Desta vez eu encontrei este tutorial, que me mostrou passo-a-passo como usar este excelente formatador de códigos escrito em Javascript. Abaixo há tutorial básico sobre a sua utilização:
  1. Acesse o site do SyntaxHighlighter e baixe-o (se não quiser ter este trabalho, utilize este link!).
  2. Descompacte o arquivo e perceba que será criado um diretório com alguns subdiretórios dentro. À partir deste diretório principal criado (dp.SyntaxHighlighter), suba para algum servidor, acessível via Internet, os seguintes arquivos: Styles/SyntaxHighlighter.css; Scripts/clipboard.swf; Scripts/shCore.js; shBrush.js e sh<LINGUAGEM>.js (onde <LINGUAGEM> pode ser substituída pelas linguagens que você costuma utilizar – detalhe que HTML e linguagens similares estão inclusas no arquivo shBrushXml.js).
  3. Insira no template do seu blog, logo antes da tag </body>, o seguinte código:
<!-- GOOGLE SYNTAX HIGHLIGHTER -->
<link href='LINK/PARA/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='LINK/PARA/shCore.js'/>
<script language='javascript' src='LINK/PARA/shBrushPython.js'/>
<script language='javascript' src='LINK/PARA/shBrushXml.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>
<!-- GOOGLE SYNTAX HIGHLIGHTER -->
Código 1. Chamada para o SyntaxHighlighter.

Notas: Lembre se de substituir LINK/PARA pelos caminhos de cada arquivo. Além disso, altere as chamadas para as linguagens (shBrushPython.js e shBrushXml.js) pelas linguagens que você costuma utilizar. Deste modo, caso use mais linguagens, adicione uma linha de chamada para cada uma e se usar menos, remova as linhas, mantendo as chamadas apenas para as linguagens que utiliza, para não pesar muito no carregamento do blog.


Salve e saia do editor de layout do blog. Neste ponto, se foi feito tudo corretamente, o SyntaxHighlighter já pode ser usado. Para adicionar códigos-fonte numa postagem, estando no editor padrão do Blogger, altere para o modo de edição de código HTML (aba Editar HTML) e cole o código fonte, envolvendo-o pelas pelas tags de marcação do SyntaxHighlighter da seguinte forma:
<pre name="code" class="LINGUAGEM">
Seu código aqui...
</pre>

Nota: LINGUAGEM deve ser substituída pelas linguagens listadas neste link, mas atente-se ao fato de que o uso está diretamente ligado à configuração de linguagens no blog, que foi discutida anteriormente neste texto.


Feito isso, basta publicar a postagem e ver o resultado, que deve ser igual ao apresentado neste blog atualmente. Lembre-se que linguagens que usam tags, como HTML e XML, precisam ter o código convertido, para que os caracteres delimitadores de tags (< e >) sejam substuídos, respectivamente por & lt; e & gt; (sem os espaços entre & e os outros caracteres). Por ser uma tarefa tediosa, é aconselhavel utilizar uma ferramenta para realizar esta conversão. O blog Javístico sugere o conversor de HTML do BlogCrowds. Já eu, prefiro utilizar uma solução feita por mim mesmo, em Python:
# -*- Mode: Python -*-
# -*- coding: utf-8 -*-
# vi:si:et:sw=4:sts=4:ts=4


"""Prepares an HTML code to use with SyntaxHighlighter."""


__author__ = "José Lopes de Oliveira Júnior (jlojunior _at_ gmail.com)"
__version__ = "$Revision: 2008.1 $"
__date__ = "$Date: 2008/11/22 17:38:39 $"
__website__ = "http://versaopropria.blogspot.com"
__licence__ = "GPLv3"


import os


print "\nStage 1/3: Opening files... ",

# Checking parameters
if len(os.sys.argv) == 3:
    input = open(os.sys.argv[1], 'r')
    output = open(os.sys.argv[2], 'w')

else:
    print "[error]"
    print "Use: $python %s PATH_TO_INPUT PATH_TO_OUTPUT" % os.sys.argv[0]
    exit(1)

print "[done]"

print "Stage 2/3: Reading input file... ",

records = input.readlines()

print "[done]"

print "Stage 3/3: Writing output file... ",
for record in records:
    output.write(record.replace('<', "lt;").replace('>', "gt;").
    replace('"', "quot;"))

print "[done]"

print "\nOutput written in %s." % os.path.abspath(os.sys.argv[2])

input.close()
output.close()
Código 2. Programa que prepara um código com tags para o SyntaxHighlighter.


Nota: Antes de usar este programa, adicione um & imediatamente ANTES de lt;, gt; e quot;. Sem isso, a saída gerada pelo programa não funciona! Precisei retirar este caractere para que o Blogger não convertesse as sequências para os caracteres que elas representam.


Para usar o programa acima, salve o código em HTML, por exemplo, num arquivo e execute-o, passando a localização deste arquivo e a localização do arquivo que será gerado. Por exemplo, se tivermos um arquivo chamado ~/Input.html e quisermos gerar o arquivo ~/Output.html para colocar seu conteúdo no SyntaxHighlighter, o comando seria:
$python ~/Input.html ~/Output.html

Vale lembrar que o programa é bastante simples e não verifica, por exemplo, permissões de escrita no diretório indicado para o arquivo de saída. Assim, cabe ao usuário garantir que o arquivo de entrada tenha permissão de leitura e que o arquivo de saída seja gravado em um diretório com permissão de escrita.

Atualizações
  • 2008/12/31 – A forma mais fácil de publicar códigos com com caracteres ou tags HTML, é usar o Blogger in Draft. No rodapé da postagem, clique em Opções de postagem e, no campo Configurações de criação de mensagem, selecione a opção Mostrar HTML literalmente.
Leia Também

4 comentários:

  1. Fala brow!!!!

    Boa dica kra. Todos que vão inserir codigos pré-formatados passam um perrengue danado.

    Quanto a tabulução eu costumo fazer na unha mesmo utilizando o DIV. Vou passar a usar sua dica.

    []s

    ResponderExcluir
  2. Com o Pygments eu penava, cara!
    Agora, com o SyntaxHighlighter, é só alegria!
    Uso e recomendo!
    []!

    ResponderExcluir
  3. Tem algum lugar já com estes arquivos up?

    ResponderExcluir
  4. Salve, Cassio!
    Ter, tem, mas sugiro que você mesmo suba os arquivos para um servidor próprio. Primeiro porque você tem uma independência maior com relação a eles. Imagine que você use o link de alguém, que, por ventura, seja desativado... Aí você fica na mão... Sem contar que há pessoas que não gostam disso, considerando uma má prática, além, claro, da questão da segurança: imagine que a pessoa de quem você linkou troque o script, para que ele realize atividades escusas?
    Segundo, porque não é difícil subir os arquivos. Em 2005, quando fiz o meu applet de endereços IP em Java, eu os armazenei nos servidores do FreeWebs (http://www.webs.com/) e até hoje ele está no ar. Como o cadastro é gratuito, recomendo o serviço!
    []!

    ResponderExcluir