Crear snipetts adaptables para mostrar código fuente en las páginas

Todos los que compartimos contenido en internet relacionado con el desarrollo web, necesitamos mostrar y compartir código fuente en nuestras páginas.
HTML proporciona varios elementos que podemos usar para insertar código de cualquier lenguaje de programación, respetando su formato original y sin que algunas de las etiquetas sean "escapadas" como ocurre muy frecuentemente.
Estos cuadros donde se muestra el código con un excelente estilo visual, son conocidos como "snippets".
Los principales requisitos de estos snippets son dos: que respeten el formato original del código y que se adapten automáticamente al ancho de la página en cualquier pantalla ya sea de una computadora o de un móvil.

Como mostrar código fuente en HTML

Los elementos que proporciona HTML para mostrar el código fuente son PRE, CODE, KBD, SAMP y TEXTAREA.
De ellos los más populares y empleados son PRE, CODE y TEXTAREA.
Cada uno tiene sus características propias, ventajas e inconvenientes.
Todos los debemos personalizar para que el resultado sea más atrayente y aceptable visualmente.
En este artículo mostramos ejemplos del uso práctico de los principales, como modificarlos y personalizarlos para mejorar su estilo visual y muy importante, como hacerlos adaptables a la pantalla de los móviles.

Mostrar código con el elemento PRE

Los elementos PRE (de pre-formatead) permiten mostrar código en HTML.
Cualquier texto introducido entre las etiquetas <PRE></PRE> se muestra en el navegador en su formato original, respetando los saltos de línea.
De forma predeterminada se usa la fuente "monospace", la misma usada en muchos editores que le asigna a cada carácter el mismo ancho.
En el siguiente ejemplo encerramos algo de código entre dos etiquetas PRE:

<div id="content">
XXXXX
</div>

Monospace es de mayor tamaño que el resto de las fuentes habituales, por lo que el contenido dentro de este elemento siempre se mostrará mayor que el resto de la página.
Además sin especificar las propiedades "margin" y "padding" en el elemento PRE, su contenido no se ajusta correctamente.
Para evitarlo en el siguiente ejemplo usamos el mismo código anterior, usando una clase en CSS para ajustar su estilo.

<style>
.pre1{border:1px solid #ccc;padding:10px;margin:12px 0 10px;font-size:0,9em;}
</style>

<pre class="pre1">
&lt;div id=&quot;content&quot;&gt;
CONTENIDO
&lt;/div&gt;
</pre>

Lógicamente es necesario codificar los caracteres para que la página valide correctamente.
El resultado es el siguiente:

<div id="content">
CONTENIDO
</div>

Uno de los inconvenientes de usar PRE, es que no es adaptable y por lo tanto el contenido no se ajusta a la pantalla de los móviles.
Esto se puede solucionar usando PRE conjuntamente con CODE y una regla CSS.

Mostrar código con el elemento CODE

Como su nombre sugiere el elemento CODE permite mostrar códigos en las páginas, principalmente en elementos inline.
<div id="content"> CONTENIDO </div>
De forma similar a PRE, el elemento CODE usa la fuente monospace, con la diferencia que el salto de línea debemos especificarlo usando etiquetas <BR>.

Como hacer un PRE adaptable

Los snipetts creados usando un PRE o CODE no son adaptables.
Para lograr que su contenido se adapte a cualquier tamaño de ventana, debemos de insertar un elemento CODE dentro un PRE y definir en sus estilos las propiedades: "overflow :auto" y "white-space :pre-wrap", de la siguiente forma:

<style>
.pre1{overflow:auto;}
.adapt{white-space:pre-wrap;}
</style>

<pre class="pre1"><code class="adapt">
CONTENIDO ADAPTABLE
</pre></code>

El resultado es el siguiente:

CONTENIDO QUE SE ADAPTA A CUALQUIER VENTANA, AUNQUE CUALQUIERA DE LA LINEAS DEL CODIGO SEA LARGA.
NO IMPORTA.

Mostrar código con el elemento TEXTAREA

El elemento TEXTAREA consiste en un cuadro de texto, donde insertar cualquier contenido.
Respeta los saltos de líneas originales y a diferencia de PRE, es adaptable.
Un TEXTAREA se crea de la siguiente forma:

<textarea cols='80' rows='1'>
TEXTO
</textarea>

Es necesario definir un número de columnas (ancho) y de filas (altura).
Se obtiene con el código anterior el siguiente resultado.
FORMATO DE TEXTO QUE SE ADAPTA A CUALQUIER VENTANA, AUNQUE CUALQUIERA DE LA LINEAS DEL CODIGO SEA LARGA.
Se puede emplear CSS para hacerlo más atractivo y darle un estilo que se asemeje al que usamos en nuestras páginas.
El resultado es el siguiente:
FORMATO DE TEXTO QUE SE ADAPTA A CUALQUIER VENTANA, AUNQUE CUALQUIERA DE LA LINEAS DEL CODIGO SEA LARGA.

Adornar y colorear el código con Prettify

Prettify es una librería JavaScript que usa CSS para adornar el código agregarle estética y al mismo tiempo hacerlo más comprensible.
El proyecto de código abierto está disponible en Github, desde donde se pueden descargar los archivos que incluyen plantillas y ejemplos.
Prettify en Github
Incluye varios temas en CSS que permiten mostrar el código con estilos diferentes.

Como usar Prettify en mis páginas

Para usar Prettify necesitamos cargar en las páginas donde lo empleemos el archivo JS y el de estilo CSS.
Se habilita en cualquier elemento PRE o CODE agregando la clase "prettyprint".
Finalmente es necesario iniciar Prettify usando el evento "onload" o hacerlo de forma dinámica cargando en vez del archivo javascript "prettify.js" el "run_prettify.js", que inicializa la función de forma automática.
A continuación se muestra un snipett que usa el estilo predeterminado de Prettify, ligeramente modificado por el autor.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Coloreando el código de mis páginas</title>
<style type="text/css">
/* prettify.css insertado inline */
</style>
</head><body>
<h1>Es hermoso y atractivo!</h1>
<pre class="prettyprint">
CÓDIGO A COMPARTIR
</pre>
<!-- script externo de prettify -->
<script src="prettify.js"></script>
<!-- iniciar función -->
<script>window.onload=function(){
prettyPrint();
}
</script>
</body>
</html>

El snipett anterior de Prettify lo usamos en esta página, como se puede comprobar en el código de ejemplo, cargando "prettify.js" desde este servidor e iniciando prettyPrint() usando el evento "onload".
El archivo de estilo "prettify.css" lo comprimimos y minimizamos e insertamos inline en la hoja de estilo interna de esta misma página, para optimizar el rendimiento.

Otros temas y estilos de Prettify

El paquete de Prettify disponible en Github incluye varios temas que usan diferentes estilos visuales.
En otras páginas de nuestro sitio usamos algunos de estos temas, los que se pueden usar como ejemplos prácticos.
✔ El tema Sons of Obsidian es usado para mostrar código en JavaScript en: Como crear e insertar gráficos con Chart.js en páginas web
✔ El tema Desert es usado para mostrar código en PHP en: Códigos de un generador de QR code en PHP
✔ El tema Doxy lo usamos para mostrar código CSS en: Como rotar y hacer girar las imágenes usando CSS
✔ El tema Sunburst lo usamos para mostrar código PHP en: Como proteger una página web con contraseña con PHP

¿Cómo hacer los snipetts de Prettify adaptables?

Al agregar la clase "prettyprint" a los elementos PRE, los embellece, pero no los hace adaptables.
En esta página usamos el snipett de Prettify, agregando el elemento CODE y la clase para que hacerlo adaptable y que se ajuste al tamaño de la pantalla de los móviles, como se puede comprobar.