2 de febrero de 2015

Resalta el código fuente de tu web con Google Code Prettify

¿cuántas veces hemos recurrido a internet para consultar lenguajes de programación tan conocidos como html e insertar fragmentos de código en los blogs, foros o cualquier página web?
La manera más fácil y rápida de entender el código fuente es resaltar su sintáxis con diferentes colores.


En la red podemos encontrar multitud de servicios online para resaltar bloques de código fuente. Algunos de los más conocidos son:

Otras páginas nos ofrecen la posibilidad de descargar archivos (ficheros javascript y css) para instalar en nuestra web:

De todas las opciones disponibles he decidido usar Google Code Prettify por dos razones de peso:

  • No necesito instalar ninguna librería
  • Es muy fácil de usar: para integrarlo en mi blog, voy a escribir muy pocas líneas de código (a continuación os mostraré varios ejemplos).
Las características fundamentales de este resaltador de códigos son:

  • No bloquea la carga de la página mientras se ejecuta
  • Detecta automáticamente los bloques de código y el lenguaje de programación usado
  • Reconoce los lenguajes tipo C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Ruby, PHP, VB, y Awk
  • Es compatible con la mayoría de los navegadores web
La forma de proceder es la siguiente:

  • Escribimos la línea

    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=default" defer="defer"></script>

    dónde skin es la hoja de estilos que vamos a cargar.
    skin = default
    skin = sons-of-obsidian
    skin = sunburst
    skin = desert
    skin = doxy
  • A continuación escribimos la etiqueta <pre class="prettyprint">
  • Introducimos el código que vamos a colorear dentro del tag pre.
    Importante: hay que reemplazar todos los < por &lt; y los > por &gt; para que el navegador entienda que es texto plano.
  • Por último, cerramos la etiqueta </pre>
Ejemplo con 'default':



Ejemplo con 'sons-of-obsidian':



Ejemplo con 'sunburst':



Ejemplo con 'desert':



Ejemplo con 'doxy':



Además podemos numerar las líneas de código para cada uno de los estilos mencionados.
Para ello, tenemos que añadir la clase linemus al tag pre de la siguiente manera:
<pre class="prettyprint linenums">
Ejemplo con 'default' y 'linemus':



Documentación oficial:

https://github.com/google/code-prettify/blob/master/README.md
https://github.com/google/code-prettify
https://rawgit.com/google/code-prettify/master/examples/quine.html



4 comentarios:

Jose Antonio Miras Ferrando dijo...

Muy buena entrada, me ha sido de utilidad.
Gracias

Jose Maria Acuña Morgado dijo...

Gracias a ti Jose Antonio por visitar el blog y por dejar el comentario :)
Un saludo!!

Lilian Armas - La Chica Informática dijo...

Muchas gracias por compartir, lo estoy probando en mi blog, se ve muy bien. Lo único malo es que en el caso del SQL no me lo resalta como me gustaría con sus palabras reservadas ¿Lo has probado con SQL?. Hasta ahora usaba Syntax Highlighter del que no tenía quejas, pero la carga de los scripts es algo pesada.

Jose Maria Acuña Morgado dijo...

Hola Lilian,
gracias a ti por visitar el blog y por comentar :)

La librería Syntax Highlighter funciona perfectamente pero como indicas, pero prefiero usar Google Code Prettify por la facilidad de uso y su rápida ejecución.

Si es posible marcar las palabras reservadas del lenguaje SQL, para ello hay que hacer unos pequeños ajustes de forma muy simple:

- a continuación de la librería run_prettify, tienes que importar el fichero lang-sql.js
- y en el tag PRE debes indicar que se trata de codificación sql especificando el atributo lang-sql


Este sería un ejemplo muy sencillo que puedes probar en local:

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=sunburst" defer="defer"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/lang-sql.js" defer="defer"></script>
<pre class="prettyprint lang-sql">
SELECT
t1.constraint_type AS tipo_restriccion,
t4.table_name AS tabla_referencia,
t4.column_name AS columna_referencia
FROM information_schema.table_constraints t1
LEFT JOIN information_schema.key_column_usage t2
ON t1.constraint_catalog = t2.constraint_catalog
AND t1.constraint_schema = t2.constraint_schema
AND t1.constraint_name = t2.constraint_name
LEFT JOIN information_schema.referential_constraints t3
ON t1.constraint_catalog = t3.constraint_catalog
AND t1.constraint_schema = t3.constraint_schema
AND t1.constraint_name = t3.constraint_name
LEFT JOIN information_schema.constraint_column_usage t4
ON t3.unique_constraint_catalog = t4.constraint_catalog
AND t3.unique_constraint_schema = t4.constraint_schema
AND t3.unique_constraint_name = t4.constraint_name
WHERE
t1.table_schema = '[NOMBRE_ESQUEMA]' AND
t1.table_name = '[NOMBRE_TABLA]' AND
t2.column_name = '[NOMBRE_COLUMNA]'
ORDER BY
t1.constraint_type DESC;
</pre>
</body>
</html>