JavaScript - Utilizando o SHJS para deixar seu código bonito na WEB

É uma necessidade recorrente de todos que divulgam seus códigos em seus sites ou blogs. Pesquise bastante e encontrei algumas ferramentas para Syntax Highlighting, que nada mais é que "colorir o código" ficando da mesma forma que na IDE. Apesar de ter achado várias ferramentas uma delas me chamou atenção pela simplicidade.

Apresentando o SHJS - Syntax Highlighting in JavaScript

O SHJS utiliza JavaScript para "colorir" trechos do código, estando disponível para várias linguagens e tendo temas de várias IDEs conhecidas, entre elas o Eclipse e o Devcpp.

Vamos começar a brincadeira!

Preparei um exemplo em Java, minha linguagem preferida por sinal ;-) , com o bom e velho hello world:

Como você pode observar o Elipse colore as palavras chave do seu código para facilitar a leitura, eu sei que você já sabe disso...

De cara quando vemos um código com essas cores já pressupomos que é Java e isso até gera uma empatia do leitor com o site.

Agora vamos começar de verdade, juro!

Acesse a página do projeto na área de downloads: http://shjs.sourceforge.net/doc/download.html.

Baixe os arquivos marcados abaixo:

Logo após entre no link: http://shjs.sourceforge.net/lang/ e baixe o arquivo sh_java.js 

que é o arquivo correspondente a linguagem java, se você observar tem vários lá de muitas linguagens.

Para utilizar faça a importação dos arquivos baixados no seu html, crie uma tag pre definindo a class sh_java

e no body defina o atributo onload para "invocar" a função sh_highlightDocument();

como exemplo abaixo:

O resultado será semelhante a esse abaixo:

Tá bom mas ainda não é o que queremos. O que queremos é que fique da mesma forma que no eclipse. Para temos acesso ao tema do eclipse vamos baixar o projeto, vá no link download a source distribution:

Depois de baixar vá até a pasta css e pegue o arquivo sh_ide-eclipse.css e substitua onde está referenciando o arquivo sh_style.css.

Casa de ferreiro...

Mas daí eu fiz o post sobre a ferramenta e eu mesmo não utilizo!? Calma aí com companheiro! A partir de agora todos os códigos do meu blog vão utilizar essa ferramenta e pra provar o que digo selecione o Código Abaixo:

  public class HelloWorld {

   /**
    * @param args
    */
   public static void main(String[] args) {
    System.out.print("Olá, eu S2 programar!");
   }

  }

Abraço e até a próxima.