OKivuu: Adicionando Estilo ao Código em sua Página da Web

Introdução

Para quem se depara com querer escrever algum código, seja Java, C, C++, entre outros, em sua página na internet ou blog (como é o meu caso) pode querer adicionar estilo a este trecho de código. Bom ao pesquisar achei um solução leve e interessante. O Google Prettify.

O Google Prettify foi criado pelo Mike Samuel para ajudar de forma rápida e simples a adicionar esse estilo ao seu código postado.

Passo #1 - Importando o Script

Procure no HTML do seu site ou blog pelo escopo do corpo, ou seja, entre as tags:

<body>
...
</body>

Entre as tags basta você inserir o seguinte link para o JavaScript do Prettify:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Pronto ao visualizar a página o script será carregado junto com a skin padrão.

Passo #2 - Utilizando o Estilo no seu Código

Agora basta incluir no seu início e fim do seu trecho de código os seguintes comandos:

<pre class="prettyprint">
...
source code here
...
</pre>

OK. Agora meu código está com cores. Mas e se eu quiser cores mais de destaque de uma linguagem específica? O Prettify suporta várias linguagens. No link ao final da postagem há a referência para as linguagens suportadas e outros exemplos.

Você pode fazer isso diretamente na declaração class da tag "<pre>" para usar apenas no bloco acrescentando "lang-*", onde '*' é o nome da linguagem ou carregar pelo link do script para que todos usem o definido, usando o atributo "lang=*":

No bloco:

<pre class="prettyprint lang-c">

Usando a linguagem ANSI C:

#include <stdlib.h>

void Funcao()
{
  printf("hello world!");
}

Em tudo:

Usando a linguagem HTML:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=html"></script>

Passo #3 - Adicionando Linhas e Carregando Skin

É comum querermos mostrar o número das linhas do código. Para isso acrescentamos na declaração do atributo class a palavrinha "linenums". Por padrão inicia com zero mas caso queira iniciar com outra linha basta usar "linenums:23", por exemplo.

<pre class="prettyprint lang-c linenums">

Usando a linguagem ANSI C:

#include <stdlib.h>

void Funcao()
{
  printf("hello world!");
}

Ao utilizar a skin padrão as linhas mostradas são apenas em intervalos de 5 em 5. Para contornar isso sem precisar adicionar um css e modificá-lo, basta incluir uma das skins predefinidas no link do JavaScript, usando o atributo "skin=*", onde '*' é o nome do skin em caixa baixa.

Exemplo usando o skin "Sunburst":

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=html&skin=sunburst"></script>

Apenas a skin "Sons-Of-Obsidian" criada por Alex Ford, é que mostra todas as linhas.

Conclusão

Creio que o Google Prettify seja uma boa solução para a tarefa, porém poderia incluir algumas funcionalidades de concorrentes como, por exemplo, copiar o código para a área de transferência. Bom, fica a dica e as referências ao final, que estão em inglês. Sorry.