Tutorial de como habilitar o SyntaxHighlighter no Blogger

Precisei habilitar o SyntaxHighlighter mais uma vez no blog depois de alterar o layout do site , essa ferramenta é muito interessante principalmente para quem tem um blog sobre programação.

Esse tutorial é para a versão 2 em diante do SyntaxHighlighter e para a nova interface do bloger.

Na sua versão atual o SyntaxHighlighter suporta as seguintes linguagens:

• actionscript3
• bash, shell
• c-sharp, csharp
• cpp, c
• css 
• delphi, pas, pascal
• diff, patch
• groovy 
• js, jscript, javascript
• java
• jfx, javafx
• perl, pl
• php 
• plain, text
• ps, powershell 
• py, python
• rails, ror, ruby
• scala
• sql
• vb, vbnet
• xml, xhtml, xslt, html, xhtml

Vamos agora ao passo a passo para habilitar a ferramenta no bloger.

Primeiro vá ao menu Modelo na pagina de configuração do seu blog , clique no botão editar HTML

Na janela que vai abrir clique na opção prosseguir. Uma janela de código HTML vai aparecer contendo o código de formatação do Layout do seu blog , procure a tag head, coloque o seguinte código logo depois  da tag head :


<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Depois basta cliquar na opção salvar modelo e pronto , seu blog já está habilitado para usar a ferramenta.

Para fazer um post com o código, edite o post normalmente , quando for colocar o código mude para a opção HTML e coloque as seguintes tags HTML com o seu código no meio:

<script type="syntaxhighlighter" class="brush: html">

#######SEU CODIGO VAI AQUI!!!############

</script>

Pronto , veja abaixo como fica a formatação de um codigo em C++ com e sem o SyntaxHighlighter:

Sem o SyntaxHighlighter:

#import

int main(){

for(int i=0 ; i<10; i++){

      puts("Ola mundo ");

     }

return(0);

}

Com o SyntaxHighlighter:

Um bug engraçado que acontece é o seguinte quando você coloca as tags para o SyntaxHighlighter no modo HTLM e volta para o modo escreve o código não aparece, mas isso é normal , continue o post até o final que na hora da publicação o código vai aparecer.

Mais informações você encontra na pagina do projeto SyntaxHighlighter