Colorea código Ruby, Javascript, HTML y CSS de forma no intrusiva
8 Abr 07La 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".
