Embellecer, resaltar y colorear el código fuente en las páginas

Usar la librería Rainbow para mostrar código en lenguajes HTML, CSS, JavaScript o PHP, con un estilo visual más atractivo y más fácil de comprender.

En varias páginas de este sitio comparto snipetts o porciones de código fuente, en varios lenguajes, como HTML, CSS, JavaScript y PHP.
Aunque no es imprescindible, si resulta de mucha utilidad embellecerlo o resaltar sus elementos con distintos colores, para facilitar la comprensión de su estructura y su funcionamiento.
Esta función conocida en inglés como Syntax Highlighting, se puede implementar de distintas formas, las que comparto en este artículo.


Librerías JavaScript Syntax Highlighting para resaltar el código fuente

Hay gran cantidad de librerías disponibles en internet, que permiten mostrar el código fuente de forma más atractiva y que facilitan su comprensión.
Entre ellas se destacan Prettify, el que explico cómo emplearlo en otro artículo, Prism.js y Highlight.js.
La gran mayoría se pueden emplear en WordPress mediante plugins o manipulando directamente código para tener un control más preciso y evitar código adicional innecesario.
Después de probar las más populares y otras alternas, me he decidido por una llamada Rainbow.
Es sencilla, fácil de implementar, completamente personalizable, con varios estilos.
En este artículo explico cómo utilizarla y muestro ejemplos del resultado.


Embellecer y mostrar código con Rainbow

La librería Rainbow es una de las más sencillas y es muy fácil de emplear.
Se requieren dos archivos para implementarla.
El primero de ellos es el script, el que se puede descargar desde el sitio del autor.
En dicha página se puede descargar un script personalizado, para uno o varios lenguajes de programación, entre ellos los siguientes: C, C#, Coffeescript, CSS, D, Go, Haskell, HTML, Java, JavaScript, JSON, Lua, PHP, Python, R, Ruby, Scheme, Shell, Smalltalk y SQL.
De esa forma reducimos notablemente la cantidad de código necesario.
El otro es la hoja de estilo CSS.
En la página del proyecto en Github, podemos escoger entre temas diferentes, con varios estilos visuales.
En este blog de WordPress uso el tema Rainbow, con el fondo de color negro y en las páginas estáticas del sitio, uso un estilo modificado, más ligero con el fondo de color blanco.
Para crear los snipetts en las páginas necesitamos crear un contenedor PRE – CODE, especificando con la propiedad “data-language”, el lenguaje de programación a emplear.
Por ejemplo, si se trata de JavaScript, necesitamos encerrar el código entre las etiquetas siguientes:

<pre><code data-language="js">
CÓDIGO JAVASCRIPT
</code></pre>

 

Ejemplos de código fuente resaltado con Rainbow

A continuación muestro en esta página algunos snipetts de ejemplo.

Código HTML

<img class="tfoto" src="../img/foto.jpeg" width="600" height="382" alt="Foto de ejemplo"><br>

<div class="fb-like" data-href="https://norfipc.com/img/foto.jpeg" data-layout="button_count" data-send="true"></div>

Código CSS

body {width : 1100px; margin : 0 auto; color : #333333;}
h1 {margin : 0; font-weight : normal;}
/* Color enlaces */
a {color : #064f78;}
a:hover {text-decoration : none; color : #ff0000;}

Código JavaScript

<script>
window.onload = function(){
// Para internet Explorer
document.onselectstart = function(){return false;}} 
// Para Firefox
document.onmousedown = function(){return false;}}
</script>

Código PHP

<?php
function js_async_attr($tag){
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );
?>

 

Otro estilo de Rainbow

En las páginas estáticas de este sitio uso la librería de Rainbow, pero con la hoja de estilo ligeramente modificada, para mostrar el código con otro estilo visual, como se puede comprobar en la siguiente imagen.
Código fuente embellecido y resaltado con la librería Rainbow


Como usar Rainbow en WordPress

En este blog uso la librería de Rainbow, para resaltar el código fuente que comparto en varios lenguajes, directamente sin usar plugins de Highlighting.
Para eso cargo el archivo JS de dicha librería alojado en mi servidor, agregándolo àl final del archivo “footer.php”, situado en el Tema Child.
Además agrego las siguientes reglas CSS en el archivo “style.css”, en el mismo directorio.

/* CSS Rainbow */
pre {overflow : auto; font-family : monospace, monospace; border : #999 solid 1px; page-break-inside : avoid; display : block; padding : 10px; margin : -12px 0 10px; font-size : 13px; line-height : 1.4em; color : #333; word-break : break-all; overflow-wrap : break-word; border : #ccc solid 1px;}
pre code {white-space : pre-wrap;}
pre {color : #ffffff; background-color : #010104;}
code .red {color : #f50419;}
code .orange {color : #f57900;}
code .yellow {color : #f5e600;}
code .green {color : #00f50c;}
code .blue {color : #0081f5;}
code .indigo {color : #5000f5;}
code .violet {color : #9000f5;}
pre .comment {color : #58dd62;}
pre .keyword, pre .selector, pre .operator {color : #bc5cff;}
pre .storage, pre .support {color : #fb2639;}
pre .string {color : #fff55c;}
pre .constant {color : #ffad5c;}
pre .entity {color : #43a6ff;}
pre .inherited-class, pre .storage {font-style : italic;}

Por último encierro el código entre las etiquetas PRE y CODE como explico más arriba.

Los que acceden a la versión de esta página en formato AMP, no podrán ver el resaltado del código, porque AMP no admite scripts externos.
Lógicamente todo el que necesite analizar o copiar código fuente, tratará de usar una versión tradicional en el modo escritorio, de la página, que lo contiene.

Más información

Crear snipetts adaptables para mostrar código fuente

Estoy en: NorfiPC | Notas | Desarrollo web | Embellecer, resaltar y colorear el código fuente en las páginas



Páginas relacionadas

Buscar con Google