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.

Windows Live Writer Suporta BlogSpot

Estava eu mechendo no live writer e resolvi arriscar, vo tentar publicar um post utilizando ele no meu blog do blogspot, e vejam só!

Configurei a url do blog e meu usuário e senha do Google Accounts e o resultado é que pode se observar nesse post.

Não garanto que utilizarei ele para fazer os posts, mais achei interessante a possibilidade.

image

Veja o screenshot (estou utilizando o notebook de minha esposa :D) , bastante comodo usar o PrintScrean e ctrl + v para adicionar uma imagem do Desktop.

A edição de categorias (marcadores) também é interessante ele ja traz uma listagem dos que já existem no blog bem como a opção de adicionar uma nova.

image

O próximo passo seria eu copiar um código e ele me trazer formatado, mais isso não funciona, sempre cola o texto puro mesmo.
Para este propósito existe um plugin-in de código fonte aberto, que é o SourceCodePlugin que adiciona essa funcionalidade.

Métodos de Extensão

Uma característia presente nas linguagens de dinâmicas e que também está disponível na plataforma .NET, é a capacidade de extender uma classe sem a que seja necessário uma herança da mesma, o que seria impossível numa classe selada, que não permite que seja herdada.
Veja um exemplo em ruby (trecho retirado do artigo Micro Tutorial de Ruby – Parte I):

class String
def empty?
self.nil? || self.size == 0
end
end

nome = "Sebastião Relson"
nome.empty?

Veja como fica a saída do programa utilizando o IRB:

relson@lenny-amd64:~$ irb
irb(main):001:0> class String
irb(main):002:1> def empty?
irb(main):003:2> self.nil? || self.size == 0
irb(main):004:2> end
irb(main):005:1> end
=> nil
irb(main):006:0> nome = "Sebastião Relson"
=> "Sebasti\303\243o Relson"
irb(main):007:0> nome.empty?
=> false
Agora um exemplo em c# .NET:

using System;

namespace MetodosExtensao
{

class MainClass
{
    public static void Main(string[] args)
    {
        int i = 1;
        Console.WriteLine(i.Negativo());
    }
}

static class ExtensoaInteiro
{
    public static int Negativo(this int i)
    {
        return -i;
    }
}
}

Nesse exemplo a saída seria somente:

-1

Para facilitar a inserção do código no blog e deixar e exemplo mais simples coloquei as classes no mesmo arquivo. O código foi retirado com adaptações do livro Microsoft Visual C# 2008, Passo a Passo - John Sharp.

Para finalizar leia também o artigo de um grande amigo meu, o memorável Rafael Camargo que fala a respeito que também fala de métodos de extensão o artigo é C#: Extension Methods & Speech.