É 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.

It is a recurring problem, you make an update in a system, and suddenly half the customers have problems with the update and everything is solved with a simple cache clearing. This occurs when a change involves a script, browsers keep a cache of scripts in order to speed up the loading of pages.

Simple solution

To resolve we will not clear the browser cache but do it download the file.

This is how it is usually inserted a script on the page:

<script src="meu_script.js"></script>

Just what we need to do is include a querystring in the src tag:

<script src="meu_script.js?v=2"></script>

Ie every time you change this number the browser will understand that this file is different than what he already has and does not need to clear the cache.

I especially love when the solution is simple :)

É um problema recorrente, você faz uma atualização, em um sistema, e de repente metade dos clientes tem problemas com a atualização e tudo é resolvido com uma simples limpeza de cache.  Isso ocorre quando alguma mudança envolve um script, os browsers guardam o cache dos scripts afim de agilizar o carregamento das páginas.

Solução simples

Para resolver não vamos limpar o cache do browser mas faze-lo baixar o arquivo.

É dessa forma que geralmente é inserido um script na página:

<script src="meu_script.js"></script>

Só o que precisamos fazer é incluir uma querystring no src da tag:

<script src="meu_script.js?v=2"></script>

Ou seja a cada vez que você mudar esse número o browser vai entender que esse arquivo é diferente do que ele já tem, não necessitando limpar o cache.

Eu particularmente adoro quando a solução é simples :)