La falta de coloreado de código es, desde que tengo este blog, una de las cosas que más echaba de menos en The-Shaker.

Sin embargo, gracias a Dan Webb, del que soy fan desde la Conferencia Rails de Londres, y a su CodeHighlighter el problema está más o menos resuelto:

por un lado se deben de incluír los ficheros javascript necesarios: uno básico y el resto según los lenguajes que queramos colorear.


 <script type="text/javascript" src="code_highlighter.js"></script>
 <script type="text/javascript" src="javascript.js"></script>
 <script type="text/javascript" src="css.js"></script>
 <script type="text/javascript" src="html.js"></script>
 <script type="text/javascript" src="ruby.js"></script>

Posteriormente, a cada bloque de código que queramos colorear le debemos de dar como nombre de clase, el lenguaje en cuestión. Por ejemplo:


 <pre><code class="ruby">
   def foo
     puts "bar"
   end
 </code></pre>

Y, por último, debemos de dotar de estilos al HTML al código que queramos colorear. Por ejemplo, mi hoja de estilos es tal que así, aunque la pienso ir ampliando:


 pre {
   border: 1px solid black;
   border-color: #BBB #DDD #DDD #BBB;
   padding: 0.2em 1em;
   line-height: 1.2;
   background: white;
 }
 code {
   font-size: 1.2em;
 }
 .javascript .comment, .ruby .comment {
   color : green;
   font-weight: bold;
 }
 .javascript .string, .ruby .string {
   color : teal;
 }
 .javascript .keywords, .ruby .keywords {
   color : navy;
 }
 .javascript .global {
   color : blue;
 }
 .javascript .brackets, .ruby .brackets {
   color : navy;
 }

De momento colores muy sosos, pero cogiendo los de Textmate, por ejemplo, puede quedar algo más "bonito".