Tribo do C.I.

Só mais um blog de informática (só que não)

Publicando código fonte com Realce de Sintaxe utilizando o dp.SyntaxHighlighter

junho 12th, 2009

Tava eu pesquisando a respeito YUI, e no site do projeto vi que tinha lá os códigos dos exemplos com Realce de Sintaxe e como também precisaria de publicar código fonte do blog cliquei no ? para ver como é feito. Foi então que conheci a biblioteca SyntaxHighlighter.

A biblioteca dp.SyntaxHighlighter é feita e JavaScript e é completamente funcional, suportando uma grande quantidade de linguagens, além da possibilidade de extende-la com sua própria linguagem veja o site do projeto aqui.

Esse post será dividido em 4 partes que são as seguintes:

  • Configurando a página para aceitar os scripts
  • Inserindo o código e escolhendo a linguagem
  • Dicas e truques
  • Um exemplo de código personalizado

Baseados totalmente nas referências e do Site do projeto, e uma das principais referência é a esse post referenciado no site do projeto mesmo, segue o link para o post:

Configurando a página para aceitar os scripts

A primeira coisa a se fazer é inserir as referencias aos arquivos de JavaScript e CSS para a formatação do código. Alguns lugares indica que você baixe toda a biblioteca e suba no site em que será usado, eu preferi fazer referência direto nas versão corrente dos arquivos.

Insira logo após a tag <head> do seu template as seguintes referências:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Esse são os CSS necessário, a segunda referência é a que definirá o tema e se você quiser outros temas pode verificar a listagem dos temas disponíveis e como ele ficam em Bundled themes.

É preciso também adicionar as referências aos arquivos em JavaScript.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>

Esse é a linha necessária para que qualquer que seja a linguagem a ser postada funcione, então para cada linguagem tem um arquivo respecitivo. o exemplo a seguir é para dar suporte a JavaScript.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

Veja a listagem de linguagens suportadas em Bundled syntaxes.

Agora só falta o script de inicialização, que é o seguinte:

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

Pronto, agora é só inserir o código.

Inserindo o código e escolhendo a linguagem

É simples! Precisa apenas colocar o seu código entre as tags </pre>...</pre> com a especificando o atributo class="brush:linguagem" onde a linguagem é a do código, segue um exemplo de código em JavaScript.

<pre class="brush:javascript">
alert('Mensagem!');
</pre>

O resultado é o que segue:

alert('Mensagem!');

Dicas e truque

Segue algumas dicas e truques na postagem do seu código.

Blogger

Tive alguns problemas para publicar os código no blogger, segue uma lista das soluções.

Editando o template

No painel para editar o seu template vá no Painel >> Layout >> Editar HTML.

Resolvendo problemas com quebra de linhas

Ao publicar o código sempre acontecia de onde tinha uma quebra de linha um tag <br/> aparecia.

No painel para editar o seu template vá no Painel >> Configurações>> Formatação >> Converter quebras de linha Selecione Não.

Publicando códigos HTML

Para publicar código em html/xml é necessário converter os sinais de maior e menor que, e você pode fazer isso facil facil utilizando a página Text -> HTML Entities Encoder.

Tabulação

Esse na verdade não achei uma solução, mais nem sempre os tabulação funciona, o blogger substitui por um espaço simple.

Um exemplo de código personalizado

É possível extender a biblioteca com linguagens que ainda não é suportado pela biblioteca, fiz um exemplo em Portugol baseado no modelo do site do projeto para demonstrar essa funcionalidade.

Fiz o arquivo em JavaScript e subi no google pages e adicionei a referência no template do blog.

SyntaxHighlighter.brushes.Custom = function()
{
var funcs  = 'leia escreva';
var keywords = 'se senão então para faça até enquanto fim programa declare';
var operators = 'módulo';

this.regexList = [
 { regex: /--(.*)$/gm,            css: 'comments' },
 { regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString, css: 'string' },
 { regex: new RegExp(this.getKeywords(funcs), 'gmi'),    css: 'color2' },
 { regex: new RegExp(this.getKeywords(operators), 'gmi'),   css: 'color1' },
 { regex: new RegExp(this.getKeywords(keywords), 'gmi'),    css: 'keyword' }
 ];
};
SyntaxHighlighter.brushes.Custom.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Custom.aliases = ['custom', 'ctm', 'ct'];

Fiz um arquivo básico e o link é http://relsonto.googlepages.com/shBrushCustom.js se você quiser testar também.

Veja como ficou:

programa
 declare i

 leia i

 se (i módulo 2) = 0 então
    escreva "Número par."
 senão
    escreva "Não impar."
 fim se
fim programa

Fica aí o post e espero que tenham gostado, até o próximo.

Sobre Sebastião Relson:
Programador multi-versátil, técnico em Redes (2004) e Bacharel em Ciências da Computação (2008). Na Tribo do C.I. atua na retaguarda do site além da edição do podcast, com poucos textos publicados, veja mais no "quem somos" do site.
  • Larissa Nepomuceno

    Nossa esse post caiu como umaluva, eu acabei de baixar o pacote syntaxhighlighter e não fazia a menor ideia de por onde começar. =]

  • Sebastião Relson

    Que bom Larissa!
    Comentários como o seu me motivam a escrever mais.
    Fico Feliz pelo post ter sido util.
    []s

  • Roberto

    Parabéns pelo artigo.
    Sebastião estou tendo problemas com quebras de linha também mas com o tinyMce em um 'cms' que estou desenvolvendo. Resolvi usar o tinyMce nos 'textareas' e o danado insiste em inserir um 'br' em cada quebra do código que coloco entre as tags 'pre'. Fica tudo numa linha e não quebra nada além disso hehehe.
    Tu tem alguma dica para esse problema Sebastião… Obrigado
    grande abraço.

  • Bryan Linconl

    Você sabe me dizer se a tag funciona no BD mysql? É pq eu tô tentando testar essa Biblioteca, só que quando eu escrevo a tag no BD, ela não é mostrada (interpretada) pelo php. E se eu usar uma outra página para adicionar ao BD, ela sequer adiciona. Já testei adicionar outros textos, e ela adiciona legal, mas se eu colocar a tag pre, ele não funciona…

  • http://relson.info/ Sebastião Relson

    Funciona, vc ta escapando ela ou fazendo algum sanitize no texto? No exemplo aqui mesmo é MySQL

  • http://relson.info/ Sebastião Relson

    Só lembrando que também existe o plugin para wordpress.

  • Leonardo

    Post muito informativo. Ajudou bastante aqui. Abraços.

Tribo do C.I.

Tribo do C.I.

Só mais um blog de informática (só que não)