Colocando Código nos Posts

Colocar um hightlighter no site não é algo tão simples como deveria. Na verdade não é simples nem descobrir que esse é o nome do que você esta procurando. Então se o que você quer no seu site é algo como o da imagem, "bem vindo, você veio ao lugar certo".

Então vou dividir a implementação e alguns poucos passos:

1. Preparar o html:

<pre class="brush:js">
&lt;script type=&quot;text/javascript&quot;&gt;
   dojo.require(&quot;dojo.parser&quot;);
   dojo.parser.parse();
&lt;/script&gt;
</pre>

O syntaxHighlighter vai procurar as tags <pre /> com a class brush. Então na própria class você coloca o tipo de código. No meu caso javascript (js). Mas se o seu código for outro, sem galho, no site http://alexgorbatchev.com/SyntaxHighlighter/ tem uma lista dos nomes e dos highlights disponíveis, assim com uma serie de temas. Observe também que o seu código deve ser encodado com html entities. Dá para usar o php com htmlentities($html) ou um site que faça isso online. Como este.

2. O código JS que fará o parse:

<style type="text/css">
 @import "http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css";
 @import "http://alexgorbatchev.com/pub/sh/current/styles/shCore.css";
</style>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>

<script type="text/javascript">
 dojo.addOnLoad(function() {
     SyntaxHighlighter.defaults['toolbar'] = false;
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.autoloader(
         'php    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
         'js     http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'
     );
     SyntaxHighlighter.all();
 });
</script>

No lugar do dojo.addOnLoad pode-se usar o equivalente do framework que estiver utilizando ou window.onload. O bloggerMode = true é importante apenas se o código vai ganhar <br />s entre cada linha de código (o que ocorre aqui no blogger). O autoloader vai carregar dinamicamente o highlighter para o tipo de código que foi selecionado na tag <pre />. Lembre-se de adicionar outros se for usar. Eu utilizei o tema shThemeEclipse.css, existem outros para escolher no site do desenvolvedor também.

3. Customizando a aparência:

<style>
.syntaxhighlightercontainer {
   background:none repeat scroll 0 0 #E2F1F8; 
   border-left:1px solid #C2C9D1; 
   margin-bottom: 30px; 
   padding:20px;
}
.syntaxhighlighter, 
.syntaxhighlighter .line.alt2, 
.syntaxhighlighter .line.alt1 { 
   background-color: transparent !important;
}
.syntaxhighlighter .gutter .line {
   border-right:0 !important; 
   margin-right: 20px;
}
</style>

Customizar a aparência é bem tranquilo, basta alguns CSSs. O que utilizei aqui para ficar parecido com o do zendframework docs foi esse. É preciso acresentar também essa tag <div class="syntaxhighlightercontainer"> em volta do <pre />.

É isso ai, espero que tenham curtido esse tutorial e que consiguam deixar seus blogs mais fáceis de ler sem quebrar muito a cabeça.