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

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.

Publicado por

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.