Mostrar código fuente con estilo

Algo frecuente en este blog es el hecho de mostrar código fuente, para lo cual se recomiendo diferenciarlo bien del contenido, a fin de asegurar que se confunda al lector y peor aún, que algo tomado de este sitio afecte el comportamiento de otro.

Hay dos etiquetas de html que pueden ayudar a esta tarea, a saber code y pre. La primera cuando se incluya código inmerso en el contenido de un párrafo, como se puede ver en éste. La segunda para mostrar fragmentos completos de código. Si bien son útiles, la diferencia no queda siempre del todo clara, para lo cual añadiremos css a dichas etiquetas para lograr el objetivo.

A grandes rasgos, definiremos tipografía y colores de tal manera que el código sea identificado fácilmente. La tipografía debe ser siempre monoespaciada, para que se respete la identación al código, con un tamaño menor al estándar para asegurar también que un post no incremente de sobremanera su tamaño. El color variará también, y esto ya dependerá de gustos personales. En este blog utilizaré el verde para simular el que se trabaja en una terminal de unix.

Código inmerso

Su uso es dentro de texto normal, cuando es más bien una referencia o un fragmento muy pequeño de una línea, que no ocupe más del ancho del contenedor del texto, debiendo encerrar el código a mostrar dentro de etiquetas <code></code>. La definición de css a utilizar es la siguiente, la cual pueden modificar a su gusto y de acuerdo al diseño de su sitio:

<style>
  code{
    font-family: 'Lucida Sans Typewriter', 'Lucida Sans', 'Courier New', 'Courier', 'Monospace' ;
    font-size: 90% ;
    color: #00ff00 ;
  }
</style>

Fragmentos de código

Cuando queramos mostrar un fragmento de código de más de una línea o bien que exceda el ancho del contenido, vamos a utilizar etiquetas <pre></pre>, con un estilo igual al de code, más dos instrucciones para agregar un borde, así como considerar el uso de barras de desplazamiento si es que el código es más ancho que el contenido. De asi requerise, también pueden modificar el color de fondo.

<style>
  pre{
    font-family: 'Lucida Sans Typewriter', 'Lucida Sans', 'Courier New', 'Courier', 'Monospace' ;
    font-size: 90% ;
    color: #00ff00 ;
    border: 1px dotted ccc ;
    overflow: auto ;
    width: 495px ;
  }
</style>

Consideraciones. Para este caso, como el anterior y la alternativa 1, cualquier código que mostremos entre las etiquetas, deberá ser prepocesado antes con un find & replace, para cambiar el ampersand (&) por &amp;y los signos de menor qué (<) y mayor qué (>) por &lt; y &gt;, respectivamente, ya que de otra manera se pueden presentar problemas al iterpretar el html a mostrar. Otra cuestión es que el navegador safari no muestra adecuadamente las barras de desplazamiento.

Alternativa 1

Una alternativa al uso de pre es la utilización de un textarea. Hay que tener cuidado, sin embargo de no aplicar el estilo directamente a la etiqueta si no crear una clase. Esto por que seguramente en el sitio existen otros controles del tipo, con el uso estándar para solicitar información, por lo cual no aplica que se muestren como código. La definición del css es la siguiente, donde la unica adición es la propiedad white-space, para asegurar que las líneas no se corten y se muestren tal cual uno las vería al estar programando:

<style>
.codigo {
    border: 1px dotted #cccccc
  ; font-family: 'Lucida Sans Typewriter', 'Lucida Sans', 'Courier New', 'Courier', 'Monospace' ;
  ; font-size: 90% ;
  ; color: #00ff00;
  ; width: 495px
  ; white-space: pre }
</style>

Y se usaría de la siguiente manera:

<textarea cols="" wrap="off" class="codigo" onclick="this.select()">
  Aquí el código
</textarea>

Alternativa 2

Si el código que queremos mostrar está en proceso de modificación, se vuelve tedioso el tener que actualizar el sitio cada vez que esto suceda, pudiendo tener problemas de integridad de la información mostrada. En este caso, podemos hacer uso de un iframe, siendo el src del mismo el url donde resida el código a mostrar, como pudiera ser un archivo de javascript. La desventaja de este método es que perdemos la posibilidad de darle un estilo particular al código, dado que se trata de otro documento. La opción en este caso sólo permite afectar el fondo, utilizando un div para contener el iframe, de la siguiente manera, y un ejemplo a continuación:

  <div style="clear:both; background-color:#cccccc; width:495px">
  <iframe width="495px" src="http://aqui.com/codigo.js"></iframe>
  </div>