Script JavaScript para realzar el código fuente de lenguajes como HTML, PHP, Javascript, etc. que mostramos en páginas web, un nuevo Syntax Highlight.
Este artículo aborda una librería que ya no se mantiene. En 2020 Google terminó de darle soporte, por lo que no te recomendaría usarla actualmente. En lugar de esta alternativa te recomendamos usar la librería Prism para syntax highlight.
En un artículo anterior vimos el script SyntaxHighlighter, y me pico la curiosidad de buscar más script que hicieran lo mismo, para entre otras cosas decidirme a utilizar el que mas sencillo y óptimo fuera.
Bien pues buscando encontré este otro llamado Google-code-prettify. A priory tenia mejor aspecto que el anterior pero una vez que lo he probado creo que me decanto por SyntaxHighlighter.
Antes de seguir comparándolos vamos a ver como si instala y utiliza este. Para ello lo primero que tenemos que hacer es descargar el paquete de la página oficial. Una vez que lo tenemos descargado tenemos que subirlo a nuestro servidor mediante FPT.
Ya tenemos la parte sencilla de la instalación, ahora tenemos que incluir tres lineas de código en cada página donde queramos utilizarlo. Para ello vamos a ver un ejemplo:
<head>
<link href="src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="src/prettify.js"></script>
</head>
<body onload="prettyPrint()" >
Este seria el código utilizado. En la cabecera irían los enlaces al CSS y el JS del script, y luego tendríamos que colocar la función prettyPrint() en la etiqueta BODY de nuestra página. Es importante no olvidarse de ella, ya que sino no funcionaría nada.
Una vez que tenemos esto, que es común a cualquier página tan solo tenemos que añadir la etiqueta
a los códigos que queremos dar formato.
En principio el script detecta el lenguaje automáticamente por lo que no hace falta especificarlo pero si quisiéramos hacerlo la etiqueta seria algo así:
<pre class="prettyprint lang-java" id="java_lang">
Con esto ya tenemos nuestro código terminado, para ver el ejemplo completo funcionado pincha aquí.
Además os dejo el código del ejemplo para que le echéis un vistazo.
<html>
<head>
<link href="src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="src/prettify.js"></script>
</head>
<body onload="prettyPrint()" >
<pre class="prettyprint" >
class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded tags.
}
</pre>
</body>
</html>
En cuanto a cambiar de estilos tan solo tenemos que cambiar la linea :
<link href="src/prettify.css" type="text/css" rel="stylesheet" />
por ejemplo por esta otra:
<link href="sytles/desert.css" type="text/css" rel="stylesheet" />
A su favor tengo que decir que es un script ligero, dispone de 3 estilos distintos y soporta la mayoría de lenguajes, además te permite crear tus propios estilos modificando la hoja de estilos ya diseñada. Tan sólo tenemos que añadir 3 lineas de código a nuestra web para que funcione.
En contra decir que no viene muy bien explicado el proceso de modificar los estilos en la web. Además decir que el paquete que te descargas esta algo mal organizado y si no te fijas de los ejemplos de la web, difícilmente puedes configurarlo adecuadamente.