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.jsdelivr.net/gh/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



13 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
  5. No se ven los colores, que podría estar pasando?

    ResponderEliminar
  6. Hola Anny,
    me puedes especificar en qué página del blog estás haciendo las pruebas para echarle un vistazo?

    Gracias.

    ResponderEliminar
  7. Hola. Siempre las ovejitas vuelven al redil... y esta beta-tester no es la excepción. Acá ando, tratando de poder utilizar "prettyprint linenums" y se me numeran las líneas de a 5 y el texto se sale del margen... ¿Se puede corregir?
    Mil gracias.

    ResponderEliminar
    Respuestas
    1. Por otro lado, te iba a subir el html con el código cargado y me vengo a enterar del fin de RawGit. Por lo visto, los enlaces viejos siguen funcionando.
      Lo dejo por acá: https://github.com/MoniAlus/Codiguitos/blob/master/Index.html
      Mil disculpas.

      Eliminar
  8. Hola Mónica,
    en este caso la solución era muy sencilla.

    Tienes que añadir lo siguiente:

    1- a continuación del body, añade el siguiente bloque de código css:

    <style>li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8{list-style-type:decimal!important}</style>

    2- dentro de la etiqueta pre añade style="white-space:pre;overflow:auto;"

    Tal que así:
    <pre class="prettyprint linenums" style="white-space:pre;overflow:auto;">

    Saludos!!


    ResponderEliminar
    Respuestas
    1. Mil gracias. Todavía me falta "afinar" el código (confieso que he copiado tu idea del iframe).

      ¿Hay alguna manera, por favor, de que las líneas aparezcan en todo el "scroll" horizontal?

      Hice esto hasta ahora: https://monialus.github.io/iframe.html.

      Eliminar
  9. Sí, hay una forma Mónica.
    La etiqueta <pre> representa un bloque de texto preformateado donde los espacios y los saltos de línea son respetados.
    Partiendo de esa premisa, bastaría con dejar espacios en blanco en la línea que genera el scroll horizontal de la siguiente forma:

    .contenedor {position:relative!important; width:95%; height:auto; margin:10px auto; color:#ffffff; padding: 10px 0px 10px 0px; background:#3d84c6; font-size:16px; font-family:Arial; border-radius:10px 0px 10px 0px; text-align:center;}

    Saludos!!

    ResponderEliminar
    Respuestas
    1. ¡Listo! Otra vez, ¡¡¡GRACIAS!!!

      Aguegué los espacios que dijiste y coloqué el white-space en pre-wrap, porque en caso contrario no se generaban las multilíneas.

      Como siempre, "sacas las papas del fuego" en tiempo récord.

      Los blogueros, agradecidos. Ni idea tienes lo que significa contar contigo "charco" de por medio.

      ¡Saludos!

      Eliminar
  10. Muchísimas gracias Mónica,
    ya sabes que puedes contar conmigo para lo que quieras :)

    Un abrazo!

    ResponderEliminar