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.