Script JavaScript SyntaxHighlighter para dar formato al código fuente de lenguajes de programación, mostrado en la web.
Actualización importante: Parece que el script que se comenta en este artículo no está ya disponible. De todos modos, en lugar de este script os recomendamos trabajar con Prism como sistema de Syntax Highlighter, pues se trata de una librería muy completa y soporte a todos los lenguajes de programación imaginables.
Siempre me ha llamado la atención las Webs que muestran código de una forma muy similar a la que vemos en nuestros editores de código, es decir, con los colores diferenciados para las palabras clave, etc.
Investigando encontré este script llamado SyntaxHighlighter que nos ayuda a mostrar el código de una forma más original.
Vamos a ir viendo paso a paso como instalarlo en nuestra web y como podemos utilizarlo.
Lo primero que tenemos que hacer es descargarnos el paquete de su página.
Lo primero que tenemos que hacer es descomprimir y subir la carpeta a la raíz de nuestro dominio.
Una vez que tenemos la carpeta en nuestro dominio vamos a ver como implementarlo en un archivo HTML.
En la cabecera del documento tenemos que meter los siguientes scripts:
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
El primero es el archivo .js del script, es imprescindible.
El segundo es el archivo .js del tipo de letra elegido para mostrar en código. En la página podéis encontrar más, en la carpeta de scripts están todos los que hay disponibles.
El tercero es el estilo a mostrar, también hay varios y los podéis ver en la carpeta styles.
Y por último esta la función Javascript que busca el código y le da formato.
Una vez que tenemos nuestra cabecera preparada vamos a ver como marcar los códigos para que se muestren con el formato deseado.
Supongamos que tenemos un trozo de código como este:
function hola(){
return "hola mundo!";
}
Para que salga con el formato deseado tendríamos que meter dicho código entre la etiqueta <pre class=brush: js;>
En class tenemos que poner el estilo de letra que hemos seleccionado.
De tal forma que el código quedaría así:
<pre class=brush: js;>
function hola(){
return "hola mundo!";
}
</pre>
De esta forma la función SyntaxHighlighter.all(); buscaría la etiqueta <pre class=brush: js;> y daría formato a lo que tiene dentro.
El documento HTML completo quedaría así:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello SyntaxHighlighter</title>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body >
<pre class="brush: js;">
function hola(){
return "hola mundo!";
}
</pre>
</body>
</html>
Podeis ver el ejemplo funcionando en una página aparte.
Ademas muestra un estilo distinto y código con etiquetas HTML para ver la versatilidad del script.
A su favor decir que es uno de los más utilizados, que es sencillo de utilizar e instalar y que cuenta con varios estilos diferentes.
En contra poco que decir, tan sólo que requiere algo más de código en la web que otros scripts similares.