Configurando SyntaxHighlighter no Blogspot, ou usando cores para sintaxe de linguagens e scripts no seu Blogger

Configurando SyntaxHighlighter no Blogspot, ou usando cores para sintaxe de linguagens e scripts no seu Blogger.

Uma das coisas legais para quem é blogueiro principalmente com o Blogger da Google é você usar scripts com cores dos
comandos destacados, principamente linguagens e scripts.

Esse artigo se propõe a ensinar a dica de como configurar isso no Blogger (Blogspot) da Google, para tal usamos um artefato, framework, chamado
SyntaxHighlighter em http://alexgorbatchev.com/SyntaxHighlighter/ desenvolvido em JavaScript por Alex Gorbatchev

Aqui vai o passo a passo para configurar o SyntaxHighlighter no seu blog da Blogger.

No seu Blogspot ou Blogger da Google, acesse a guia [Design] clicar no item [Editar HTML]

Por segurança clicar no item [Baixar modelo completo] antes de fazer qualquer alteração no modelo.

Já com uma cópia do seu template feito, acesse o campo [Editar Modelo], e encontre o texto </head> tag de fechamento.
Antes dessa tag, adicione o seguinte:

<!-- 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'/>
<!-- configuracao do tema, css usado, default, branco, fim -->
<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'/>
<!-- configuracao de linguagens usadas, fim -->

<!-- fim configuracao do Syntax Highlighting -->

Um breve comentário do que foi adicionado ao modelo original ...

A partir do comentário [<!-- configuracao do tema, css usado, default, branco, inicio -->]
Nesse caso é o tema padrão (default) branco, mas tem vários temas a ser visto no site do SyntaxHighlighter em http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
No meu blog eu o uso um tema cinza preto, estilo console do linux, no qual seria este:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css'/>

A partir do comentário [<!-- configuracao de linguagens usadas, inicio -->]
Adicione as linguagens que você planeja usar, no seu blog.

Por exemplo, estou habilitando as seguintes linguagens ou scripts (brushes ou escovas):
JavaScript, Bash, SQL, XML/HTML, C++, Java, PHP, Perl, Delphi, Plain, Diff, Vb.

Salve o seu modelo modificado, clicando em [SALVAR MODELO].

Agora você está habilitado para adicionar destaque de sintaxe para o seu blog.
Envolva seu código em uma tag <pre> e especifique a classe brush, utilizando o atributo de classe a linguagem ou script.
Por exemplo, para destacar um bloco de SQL:

<pre class="brush:sql">

SELECT *
FROM usuario
WHERE id_usuario = 777;

</pre>


Veja como aparece, quando formatado usando o SyntaxHighlighter:

SELECT * 
   FROM usuario
  WHERE id_usuario = 777;
 

O código que você está formatando deve ser HTML, já que o framework foi desenvolvido em JavaScript.

Espero ter ajudado, APSJ!