NorfiPC
NorfiPC » Códigos » Estilo

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.
Embellecer, resaltar y colorear el código fuente en las páginas
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>
<!-- Boton Like de Facebook -->
<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.

Páginas relacionadas



Sígueme en las redes sociales


Página de este sitio que te sugiero hoy
 
Inicio | Mapa del sitio | Buscar | Sobre mí