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.
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:
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!
