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:

  1. Muy buena entrada, me ha sido de utilidad.
    Gracias

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

    ResponderEliminar
  3. 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.

    ResponderEliminar
  4. 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>

    ResponderEliminar