Escribiendo códigos con PRE

Con la etiqueta PRE y algo de CSS podemos escribir manteniendo los espacios en blanco intactos. Eso es lo que hacemos cuando escribimos códigos para colocar como ejemplos pero, podemos agregar una etiqueta extra que no tiene propiedades específicas y que se usa para indicar que eso es un código; la etiqueta se llama CODE:

Para muchos, la regla es así: los ejemplos se colocan dentro de una etiqueta <pre> y los códigos se colocan entre etiquetas <code> y </code>:

<pre><code>
..............
</pre></code>

Pero, la regla es "relativa" y no caben dudas, hacer ciertas cosas es engorroso y difícilmente agregue alguna función interesante. La pregunta que muchos hacen es cómo escribir código en una página web y que el navegador no lo ejecute:

• Hay que cambiar todos los caracteres < por &lt;
• Los caracteres > pueden dejarse aunque es aconsejable cambiarlos por &gt;
• Hay que cambiar todos los caracteres & por &amp;

Supongamos que yo quiero mostrar el código para hacer una lista como esta:

• Este es un enlace a la página e ayuda de la www.w3.org
• Y esto es sólo una línea más del ejemplo para la etiqueta code

Tendría que escribir esto:

<pre>&lt;ul&gt;
  &lt;li&gt;Este es un enlace a la página e ayuda de la &lt;a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE"&gt;www.w3.org&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;Y esto es sólo una línea más del ejemplo para la etiqueta &lt;code&gt;<code>&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

Para que en la página se mostrara esto:

<ul>
  <li>Este es un enlace a la página e ayuda de la <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">www.w3.org</a></li>
  <li>Y esto es sólo una línea más del ejemplo para la etiqueta <code>code</code></li>
</ul>

Para controlar la forma en que lo vemos, lo que debemos hacer es utilizar CSS y allí tenemos varias alternativas.

Lo primero que debemos hacer es tratar de establecer el ancho de las líneas ya que PRE, por defecto, no las ajusta (si el texto es largo, como se ve en ejemplo, una parte desaparece). La propiedad que vamos a usar para controlar esto se llama white-space que es la que establece la forma en que queremos que sean tratados los espacios en blanco. Estos son los valores posibles:

normal deja que los navegadores resuelvan las cosas; sólo se muestra un espacio en blanco (si hay dos o más seguidos, se ignoran) y se hace un salto de línea si el texto es demasiado largo.
pre todos los espacios en blanco son mostrados y las líneas se cortan.
nowrap los espacios en blanco extras se eliminan pero no se hacen saltos de línea automáticos.
pre-wrap los espacios en blanco extras no se eliminan pero se hacen saltos de línea automáticos.

En este ejemplo, vemos la etiqueta PRE por defecto y tiene un fondo blanco par que se vea donde comienza y donde termina:

<ul>
  <li>Este es un enlace a la página e ayuda de la <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">www.w3.org</a></li>
  <li>Y esto es sólo una línea más del ejemplo para la etiqueta <code>code</code></li>
</ul>

La propiedad por defecto es whiteSpace='pre'; se ven los espacios en blanco (la sangría), la línea se corta y lo que excede el ancho, queda oculto. Los otros valores combinan las alternativas de ver/ocultar espacios en blanco y de cortar o no las líneas.

Lo mejor, en principio, sería utilizar el valor pre-wrap y colocar las diferentes variaciones para que sean "entendidas" por todos los navegadores ... o casi todos:

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -o-pre-wrap; /* Opera 7+ */
}

También podemos colocarle un fondo de color o una imagen, separar un poco los textos, colocarle bordes, establecer márgenes:

<ul>
  <li>Este es un enlace a la página e ayuda de la <a href="http://www.w3.org/">www.w3.org</a></li>
  <li>Y esto es sólo una línea más del ejemplo para la etiqueta <code>code</code></li>
</ul>

pre {
  background: #F5F5F5 url(URL_imagen) no-repeat 8px 8px;
  border-bottom: 4px inset #000000;
  border-top: 4px outset #000000;
  color: #333333;
  font-family: Tahoma,Arial,'Trebuchet Ms';
  font-size: 13px;
  line-height: 17px;
  margin: 10px 0 10px 10px;
  padding: 30px 10px 10px 10px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
}
pre code {
  color: #0000FF;
}

Definiendo clases CSS podríamos tener diferentes modelos para mostrar diferentes lenguajes:

pre {
  background: #F5F5F5 url(URL_imagenNormal.gif) no-repeat left top;
  .......
}
pre.html {background-image: url(URL_imagenHTML.gif);}
pre.css {background-image: url(URL_imagenCSS.gif);}
pre.php {background-image: url(URL_imagenPHP.gif);}
pre.javascript {background-image: url(URL_imagenJS.gif);}

Por ejemplo:

<pre>
  [ se mostraría la imagen por defecto ]
</pre>
<pre class="css">
  [ se mostraría la imagen URL_imagenCSS.gif ]
</pre>

REFERENCIAS:

Project Cerbera

www.w3.org