SyntaxHighlighter #2 - Instalação

Pessoal...

No post anterior eu expliquei o que era o SHL - SyntaxHighlighter, você pode conferir aqui. Apresentação feita, agora vamos iniciar a configuração da nossa ferramenta. Mas, para isso precisamos decidir se teremos o nosso código salvo em um servidor próprio ou se usaremos uma CDN para acessar os arquivos necessários para seu funcionamento.

Caso tenha optado por ter o código em um servidor próprio, acesse o site oficial SyntaxHighlighter, localize no menu o link para download. Atualmente a "current version" é a 3.0.83, mas você pode optar por escolher versões anteriores.
Nesse post vamos trabalhar com a versão atualizada.

Aguarde o download do arquivo finalizar, acesse seu servidor usando FileZilla ou outro cliente FTP que preferir, e faça o upload do SLH compactado para seu servidor, extraia os arquivos e mantenha-os em um diretório que preferir.

A partir de agora, independente da forma escolhida (CDN ou servidor próprio) os passos deverão ser realizados.
Primeiro vamos adicionar em nosso código fonte o caminhos onde nossos arquivos se encontram. Se você acompanha o blog deve ter visto o post onde relato o problema que tivemos ao usar a CDN do Google, e como solução adotamos a CDN do próprio criados da ferramenta SHL.

Exatamente antes da tag "</body>" vamos adicionar esse código aqui:

<!-- inicio configuracao do Syntax Highlighting -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>

<!-- configuracao do tema, css usado, default, branco, inicio -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
 
<!-- adicionando Script para SyntaxHighlighter -->
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>
 
<!-- configuracao de linguagens usadas, inicio -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<!-- configuracao de linguagens usadas, fim -->
 
<!-- fim configuracao do Syntax Highlighting -->

Caso você tenha optado por salvar os arquivos no seu servidor, será necessário alterar esses caminhos para o local onde você hospedou a ferramenta.

Para facilitar a explicação e entender o que é cada um desses arquivos que adicionamos, fiz marcações no código (que também irei ensinar):

Linha 2 e 7 são arquivos relacionados ao core do SHL, são arquivos necessários para renderizar a ferramenta (css default) e para o funcionamento da ferramenta;

Linha 5 é o arquivo .css onde você da identidade visual para sua ferramenta SHL. Existem algumas identidades prontas e vou mostrar quais são e como configura-las; 

O trecho referente a linha 9 é o script para inicializar a ferramenta;

A partir da linha 15 são arquivos que permitem você utilizar o SHL para formatar código fonte das respectivas linguagens. Caso você tenha um código Java, pretende formata-lo usando o SHL é necessário que esse arquivo "shBrushJava.js' esteja adicionado no seu código.

As configurações necessárias estão prontas, nesse ponto já podemos utilizar o SHL e formatar nossos códigos em posts diversos. Mas para isso a ferramenta precisa de um marcador, e o marcador utilizado é a tag "<pre>".

No entanto essa tag por si só não será suficiente para formatar seu código, sendo necessário adicionar o atributo class="brush: java, xhtml, xml, sql", que é o minimo necessário para que nosso código fique formatado.

Para um exemplo simples, clique em criar um novo post, normalmente o editor esta no modo "Escrever", altere para o modo "HTML" e escreve o trecho de código abaixo:

<pre class="brush: java">

public class Devic {

    public static void main(String[] args) {

        System.out.println("Olá pessoas!");

    }

}

</pre>

O resultado do código acima é este:

public class Devic {

    public static void main(String[] args) {

        System.out.println("Olá pessoas!");
    }
}

Faça o teste no seu blog e veja o resultado.

No próximo post eu vou explicar sobre os atributos que você inserir na ferramenta e como alterar a identidade visual.
É isso, e até a próxima!