JMiur [E]

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
  • 12 comentarios:

    Camila  

    Hablando de espacios, te hago una consulta: ¿cómo hacerle para que al escribir un texto en nuestro blog de Blogger dejemos sangría? esto es:

    Abcdefghy.................. etc.

    ---Los guiones no van, solo los puse para darte el ejemplo de como hacerle para escribir así: dejando un espacio en balnco (como en los textos de los libros o revistas). Después de punto y aparte, va sangria.

    Vi en un blog que asi está ¿cómo puede hacerse?

    Muchas gracias de antemano por tu atención.

    Responder
    Víctor  

    Ufff bacan, yo tenia el problema de que me salía una linea infinita en donde ponía el código pero eso solo se veía en el ie6, lo solucioné agregándole:

    word-wrap:break-word;

    Aunque no me salen las barras de desplazamiento, me confomo...

    Responder
    Luis  

    Hola J, no me presento, porque ya me conoces (...) ¡Sorpresa! xD.

    Estoy indagando con el HTML y no encuentro la forma de conseguir que cuando quiera insertar un bloque entrecomillado, éste aparezca en algún formato "especial". Me explico; he visto en muchos blogs que cuando utilizan por ejemplo la etiqueta blockquote el texto aparece con una línea vertical a la izquierda del mismo, o con un gran signo de "comillas" de fondo que enfatiza el texto, o con la imagen de un clip... no sé. Seguro que sabes a qué me refiero.

    Me gustaría saber si es posible que cada vez que escriba usando por ejemplo la etiqueta blockquote o cualquier otra el texto aparezca con alguno de esos formatos. Supongo que será algo similar a cuando utilizo las etiquetas pre y code para simular el intérprete de comandos de Linux.

    Responder
    JMiur  

    Camila:
    tendría que ver los detalles pero, hay una propiedad CSS que controla eso. Por ejemplo: text-indent: 50px; con cualquier valor.

    Victor:
    Fíjate si soluciona agregando:
    overflow: scroll;
    o bien:
    overflow-x: scroll; overflow-y: scroll;
    dependiendo de que barra de desplazameinto quieres forzar.

    Luis:
    Puede ser que alguna de las respuesta estén en este post.

    Responder
    Gem@  

    Hace tiempo que muestro los códigos con la etiqueta PRE y CODE, como bien dices mediante las CSS se puede personalizar en su totalidad.
    Para las barras de desplazamiento tengo añadido "overflow:auto;" determina si es necesario agregar barras de Scroll si no lo es no se muestra ninguna barra, todo depende del contenido que añadimos.

    Responder
    Camila  

    Regresé al blog donde lo vi, y ya no lo tienen asi :(

    Responder
    Birdelo  

    Hola, excelente blog, he consegido mucho a través de él.

    Me gustaría preguntarte, si puedo utilizarlo para ponerlo en la lista de blogs que ayudan, a ver si queres?!.

    Responder
    JMiur  

    Exacto, Gem@, lo normal es overflow:auto pero, si es necesario "obligarlo", usamos overflow:scroll.

    Camila: la propiedad es esa: text-indent: valorpx pero ¿donde ponerla? debería estar en cada párrafo.

    No hay problema, Birdelo, sería un honor :)

    Responder
    Antony  

    Hola! Interesante, pero gustaría que pusieras un paquete de imagen, se me ha hecho difícil conseguirlas... Yo utilizo PRE pero no me gusta la imagen que tengo… Saludos!

    Responder
    JMiur  

    Lo siento, Antony, no tengo ninguna. Habrá que buscar en la web.

    Responder
    chato  

    hola Jmiur tengo un blogspot igual que tu pero me hecho un banner no mas que no se como colocar el codigo para que la gente lo pueda copiar, intente con texto y igual ejecuta el codigo, yo de html no se nada y quisiera pedirte un ejemplo de como le puedo hacer para que puedan copiar mi codigo de antemano grs.

    Responder
    JMiur  

    Tal vez esta entrada del blog de Gem@ te sea útil.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR