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.

Uma boa desculpa para reinvetar a roda

janeiro 6th, 2009
No meu post e ilustração de estréia venho falar de algo que eu como programador “as vezes” me pego pensando sobre, que é uma boa desculpa para reinventar a roda.
Quem foi que nunca quis fazer uma agenda de contatos, ou mesmo um magnífico software para locadora, controle de estoque, calculadora, e outros mais, mesmo conhecendo um equivalente.
Minha Melhor Justificativa é que uso a construção de tais softwares para me acostumar com conceito, ou seja, se não sou acostumado a usar um agenda eletrônica, faço uma bem simples para que eu possa ir me acostumando com a idéia, e depois uso outro que tem disponível como Google Calendar e outros softwares que tem o mesmo intuíto.
Bom foi um post curtinho e simples, mais serve para eu ir me acostumando com idéia.

Tribo do C.I.

Tribo do C.I.

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