Blog do Moreira: Instalando o SyntaxHighlighter no Blogger

Motivação

A idéia de fazer um blog não é nova. Na verdade, em dezembro de 2011 eu criei um blog no wordpress, mas até agora, não publiquei nada por lá. Agora voltei a ter necessidade de ter um lugar para colocar minhas idéias em ordem e servir de referência futura. Criei o blog, aqui no Blogger e pra começar já me deparei com o primeiro desafio. Como a maioria dos meus futuros posts terá trechos de código em seu texto e não achei um plugin ou coisa equivalente por aqui comecei a pesquisar... Encontrei diversos artigos e dicas sobre o assunto. O resumo do que encontrei e que está funcionando, como veremos, foi o seguinte:

O que é o SyntaxHighlighter

Basicamente é um conjunto de arquivos javascript e alguns arquivos css que formatam um código para sua apresentação. Essa biblioteca foi escrita e continua sendo mantida por Alex Gorbatchev e maiores detalhes sobre todas as possibilidades disponíveis podem ser vistas no site http://alexgorbatchev.com/SyntaxHighlighter/. Para o propósito deste documento vamos ver como instalar e usar o SyntaxHighlighter no Blogger do Google.

Instalando os arquivos

O trecho de código abaixo deve ser colocado dentro da página de modelo do seu blog. Lembre-se de que sempre que vc mudar o modelo deverá colocar o código novamente no novo modelo escolhido. Em "Seu Blog" clique em "Modelo" e em seguida em "Editar Html"

Antes da tag "</head>" coloque o seguinte código:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<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'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushJScript.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/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/shBrushBash.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Salve o seu modelo. Note que estou carregando um arquivo chamado shThemeDefault.css, que define o estilo em que o código será mostrado. Existem diversos temas disponíveis e vou falar deles mais adiante. Os arquivos ".js" que estou carregando são os "interpretadores" das diversas linguagens cujo código desejo exibir no meu blog. Existem muitos outros, para conhece-los , consulte o site do autor, já indicando anteriormente.

Usando o SyntaxHighlighter no seu Blog

Existem duas formas de usar o SyntaxHighlighter: a primeira coloca o texto do código dentro de um javascript; a segunda coloca o texto do código entre as tags "<pre>...</pre>". Eu prefiro usar a segunda, mas ambas são explicadas no site do autor. Do jeito que estou usando faça assim: Com o editor do post em modo "html" introduza o seguinte código (vou usar como exemplo um pequeno trecho de código php):

<pre class="brush:php">
...
</pre>

Agora volte o editor para o modo "Escrever" e cole o seu código no lugar dos tres pontos "..." Isso é necessário para que os caracteres especiais (para o html) sejam convertidos. O resultado, no seu código visto no formato html deve ser:

<pre class="brush: php; gutter: true">&lt;?php
  // 62 / 52 (sem números) caracteres!
  $string = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,";
  $string .= "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,";
  $string .= "0,1,2,3,4,5,6,7,8,9";
  $array_char = split(",", $string);
  $senha = "";
  for ($i = 0; $i &lt; 8; $i++) {
    $index = rand(0, 61);
    $char = $array_char[$index];
    $senha .= $char;
  }
  echo "&lt;h3&gt;" . $senha . "&lt;/h3&gt;";
  echo "&lt;h1&gt;" . md5($senha, false) . "&lt;/h1&gt;";
?&gt;</pre>

E o resultado, no seu blog deverá ser:

<?php
  // 62 / 52 (sem números) caracteres!
  $string = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,";
  $string .= "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,";
  $string .= "0,1,2,3,4,5,6,7,8,9";
  $array_char = split(",", $string);
  $senha = "";
  for ($i = 0; $i < 8; $i++) {
    $index = rand(0, 61);
    $char = $array_char[$index];
    $senha .= $char;
  }
  echo "<h3>" . $senha . "</h3>";
  echo "<h1>" . md5($senha, false) . "</h1>";
?>

Temas

Existem diversos "temas" que podem ser aplicados na formatação do código. Clique no tema e veja o resultado nos códigos anteriores.

Próximos Passos

Agora resta descobrir como colocar os arquivos do SyntaxHighlighter no meu próprio blog, apenas para o caso do site do autor estar temporariamente indisponível. Se alguém já descobriu como fazer isso, agradeço antecipadamente se puder compartilhar a informação nos comentários. Até o próximo, que deveria ser o primeiro...

Blog do Moreira

segunda-feira, 24 de junho de 2013

Instalando o SyntaxHighlighter no Blogger