Código nos posts e syntax Highlighting
Thursday, 12 de April de 2007 | 1 comentário
Depois de, sem sucesso, procurar plugins para o wordpress (aqui e aqui), que “colorissem” o código inserido nos posts, resolvi deitar mãos à obra.
Eis o que pretendia:
- Inserir código (qualquer linguagem) nos posts sem que o mesmo seja executado;
- “Colorir” o código (syntax highlight);
- Não adicionar elementos desnecessários ao código HTML da página apenas para motivos visuais;
O último ponto foi um factor de exclusão para a maioria dos plugins que encontrei. Acabei por utilizar o Code Markup que permite a inserção de código nos posts sem que este seja executado. O primeiro ponto estava ultrapassado.
Depois, precisava de colorir o código. Quase todos os plugins que encontrei utilizavam o GeSHi que realça código fonte (syntax highlight) atribuindo cores aos diversos componentes. Funciona com um grande número de linguagens, mas acrescenta elementos visuais à página e isso levou-me a não o utilizar. Virei-me então para uma solução com javascript.
Encontrei, no Google Code, o google-code-prettify que tem o mesmo efeito que os plugins que encontrei e não acrescenta elementos desnecessários ao código da página. Vencedor encontrado.
Socorrendo-me da fantástica jQuery criei um ficheiro javascript com o seguinte conteúdo:
$(document).ready(function() {
$("code").each(function(i){
this.className = "prettyprint";
});
prettyPrint();
});
ao qual acrescentei o código do google-code-prettify para evitar a inclusão de ainda mais um ficheiro. De notar que, na sua forma inicial, o google-code-prettify sugere que se invoque a função prettyPrint(); da seguinte maneira:
<body onload="prettyPrint()">
Chamado de inline events este método deve ser evitado, de forma a uma maior separação entre o conteúdo, a apresentação e a dinâmica das páginas.
O código faz o seguinte:
- assim que o documento esteja disponível, selecciona todas as tags code que não tenha a class plain;
- em cada um dos elementos seleccionados anteriormente atribui a class prettyprint, que é usada como alvo pelo google-code-prettify;
- depois de todos os elementos code correspondentes terem a class prettyprint atribuída, executa a função prettyPrint(); que vai alterar a cores do texto dentro dessas mesmas tags;
Bastou adicionar o ficheiro criado ao cabeçalho (head) da página, assim:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="highlight.js"></script>
E pronto, está a funcionar.
Caso o utilizador não tenha o javascript activo o efeito perde-se. É verdade, mas evita o adicionar de elementos com fins visuais, que era precisamente aquilo que pretendia.
Podem ver exemplos desta funcionalidade nas entradas de código neste post.
Francisco Tomé Costa13 de April de 2007
Bom achado…