13 de outubro de 2009

Como usar o SyntaxHighlighter

Eu resolvi fazer uma revisão em alguns posts desse blog e vi que aquele que fala sobre o SyntaxHighlighter não diz nada sobre como usá-lo. :-(

Pois bem, vamos resolver essa falha e detalhar como ele funciona.

A função do SyntaxHighlighter é mostrar trechos de código com coloração de sintaxe e numeração de linha, nas páginas do seu site. Opcionalmente, podemos também mostrar uma régua de colunas, bastante útil em alguns casos. Pode ser em um blog, em página estática ou em um CMS.

Para ele funcionar, é preciso mexer no tema do seu blog e, no seu post, dizer o quê você quer que seja formatado por ele.

Primeiro, vamos à mexida no tema do blog. Ali, você precisa importar alguns arquivos CSS e JavaScript, logo antes da tag </head>, conforme abaixo:

<link href='http://assefneto.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://assefneto.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<link href='http://assefneto.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://assefneto.com/pub/sh/2.0.296/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://assefneto.com/pub/sh/2.0.296/scripts/shBrushPython.js' type='text/javascript'></script>

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>


Vamos entender o que fizemos aí acima:
  • As linhas 1 e 2, importam os arquivos principais do SyntaxHighlighter: shCore.css e shCore.js. Esses não podem faltar.
  • A linha 3 importa o tema default. Você pode escolher outros temas que existem.
  • As linhas 4 e 5 importam os temas para coloração de plain text e de python, que são os que me interessam. Existe coloração para outras linguagens, que você pode usar para seu caso particular.
  • A linha 8 ajusta-o para funcionar com o Blogger, que é o caso desse blog. Se você tem um site que funciona fora do blogger, não precisa configurar esse item.

Depois que o template foi mexido, você precisa criar um post para mostrar seu código formatado, certo?

Para isso, escreva seu post normalmente. O texto que você colocaria entre as tags <code> e </code>, você deve colocar entre as tags <pre> e </pre> com uma classe especial, conforme abaixo:

<pre class="brush: python; ruler: true">
traco = '-' * 30
print "30 tracos: ", traco
</pre>


O class="brush: python" é que diz ao SyntaxHighlighter qual é o formato do seu código. Nesse caso, Python.
Nosso exemplo também conta com uma régua horizontal na parte superior. Como era de se esperar, o ruler: true é quem faz esse efeito.

Existem outras configurações possíveis. É possível tirar os números de linha, ajustar o tema, etc. Dá uma fuçadinha e personalize conforme sua necessidade.

Observações
  1. Todo trecho de código que você quiser mostrar formatado pelo SyntaxHighlighter tem que estar HTML encoded. Use esse serviço p/ fazer isso.
  2. O preview do Blogger não vai mostrar seu código formatado pelo SyntaxHighlighter. É preciso salvar o post ou fazê-lo em um blog de teste também configurado para o SyntaxHighlighter.
Acho que agora dá pra entender como colocar o treco pra funcionar.

Uma útima dica: dê uma olhada no código fonte desse post para ver como as coisas foram feitas. ;-)

Eu sou Vinicius Assef, um programador do século passado que gosta de Python, pratica Lean Development e acredita em Deus. Você pode me contactar por email ou twitter.

Nenhum comentário:

Postar um comentário

Marcadores