Recientemente implementé un resaltador de sintáxis en este blog para que el código que publicara fuera fácilmente leíble por cualquiera. Anteriormente intentaba yo darle formato usando las herramientas de formato de blogger pero me di cuenta que perdía demasiado tiempo en esta tarea y al final el código seguía luciendo mal.
Así que un día de tantos mientras leía un blog, ví un comentario de un lector que sugería usar un "Sintax Highlighter", vaya como cuesta a veces buscar algo en Google cuando no tienes la frase correcta. Ahí estaba la solución para mi código plano y sin color.
De esta manera aterricé al proyecto: "Sintax Highlighter" que hace justamente lo que necesitaba.
Implementación:
Para usar el resaltador necesitas descargar el proyecto del sitio que incluye todos los javascripts y CSS's que debes subir a tu servidor para referenciarlos en tu código.
Para los pobres o tacaños como su servidor que no hemos adquirido los servicios de un hosting o demasiado vagos para buscar uno gratuito, también se puede referenciarlos directamente del proyecto como lo hago yo en este blog:
<link href='http://syntaxhighlighter.googlecode.com/../SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shBrushCSharp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shBrushXml.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/..s/shBrushPython.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shBrushCSharp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shBrushXml.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/..s/shBrushPython.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/../shBrushPhp.js'/>
Claro está que esta referencia hace un poco más lenta la carga de la página y no garantiza que los archivos referenciados estarán siempre en el servidor del proyecto. Lo recomendable es subirlo en tu propio servidor.
Para activar el resaltador en tu página debes de correr el siguiente código inmediatamente después de la etiqueta <body>:
La primera línea indica al resaltador que mi página es un blog (necesario para adecuar el formato correctamente). Después se invoca al resaltador con la función HighlightAll.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</html>
Cómo usarlo?
Para resaltar un código simplemente abres una etiqueta "pre" y le asignas al atributo "name" el valor "code" y al atributo "class" el nombre del lenguaje que estás utilizando:
- javascript
- html
- java
- c-sharp
<pre name="code" class="html">Ejemplos
Put html code here!
<pre>
HTML
<html>
<body>
<head>
</head>
Body Code here!
</body>
</html>
Javascript
function pow(int x) {
return x * x;
}
Java (Collapsed)
public class Hello {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
No hay comentarios:
Publicar un comentario