Código-fonte formatado!

Posted by Rafael Orágio

Galera, neste primeiro post "técnico", mostrarei a técnica que será utilizada para postar os códigos-fonte dos futuros posts que serão colocados no blog. Esta técnica é chamada "SyntaxHighlighter". Não há nada mais chato do que você procurar por algo na net e justo aquele código que te interessou, o blogueiro tirou um "print" da sua IDE e postou a imagem do código em seu blog. Por esses e outros motivos decidi compartilhar esta técnica que hoje é pouco utilizada em blogs, mas muito utilizada em fóruns.
O "SyntaxHighlighter", nada mais é do que alguns arquivos CSS e Javascript[bb] que integrados ao modelo HTML do blog, permitirá a postagem de códigos-fonte formatados. Segue abaixo um exemplo de como ficará:
public class CodigoFormatado {
 
   public static void main(String[] args) {

    }
}
Bom, mostrarei então os passos para configurar o modelo HTML do seu blog.
1- Realizar o download do "SyntaxHighlighter". É um arquivo rar que conterá os arquivos CSS e Javascript necessários para a configuração. O download pode ser feito aqui.
2- O próximo passo é hospedar alguns arquivos contidos no arquivo rar, em algum desses sites de compartilhamento de sua preferência. Como eu já fiz isto uma vez, se quiser não será preciso passar por esse passo (você entenderá mais à diante).
3- Abra o editor HTML do seu blog ("Personalizar" -> "Modelo" -> "Editar HTML") e procure pela tag </body>. Logo acima, entre com as seguintes linhas de código:
</link href='http://flash-host.com.br/blog/sh/SyntaxHighlighter.css' rel='stylesheet' type='text/css'>




Repare que na linha 4, o arquivo referenciado na url é o shBrushJava.js, que no meu caso estou utilizando para formatar os códigos em Java, mas nada o impede de hospedar o arquivo referente à linguagem de sua preferência. Os arquivos estão localizados na pasta "scripts" do "SyntaxHighlighter". Só não se esqueça de alterar a url para o arquivo hospedado.
4- Por último, nos resta testar para ver se a formatação está ocorrendo corretamente. Para isso, você deverá inserir o código dentro da seguinte tag:
// Alterar "Java" pela linguagem que desejar
.
// Seu código
Bom pessoal, por enquanto é isso! Qualquer dúvida não deixem de enviar comentários.
Abraços.

Comments (0)

Postar um comentário