> Faqs > Escribir codigo fuente en el contenido de página HTML

Escribir codigo fuente en el contenido de página HTML

¿Puedo mostrar codigo HTML en una página web?

Tengo entendido que el elemento <pre></pre> es para eso, pero solo puedo mostrar codigo CSS, y cuando intento poner codigo HTML dentro del elemento pre, no me sale como texto preformateado, sino como si estuviera poniendo etiquetas en mi editor.

Si es que se puede mostrar código HTML, ¿mediante qué etiqueta lo puedo hacer?

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

La etiqueta <pre> sirve para crear texto preformateado. Esto quiere decir simplemente que los caracteres de salto de línea, espacios y tabulaciones son tenidos en cuenta. HTML no Los tendría en cuenta de manera predeterminada.

Lo que pasa es que las etiquetas html siguen siendo etiquetas. Por mucho que utilices la etiqueta <pre>, lo que colocas dentro es código HTML. Por eso te lo procesa y renderiza las etiquetas. El caso del código CSS es diferente porque no tiene etiquetas, por eso te lo muestra bien en una etiqueta <pre>.

La solución pasa por utilizar los caracteres especiales para los símbolos mayor y menor que. Me refiero a < para el símbolo < y > para el símbolo >. Así consigues que las etiquetas de tu código no sean realmente etiquetas y no se muestren como tales. Sino que serán texto con símbolos que el navegador no entenderá como etiquetas.

Otro detalle importante, que no es necesario de manera obligatoria, pero sí recomendable sobre todo desde el punto de vista de la semántica, es que uses la etiqueta <code> dentro de la etiqueta <pre>. Como digo, <code> no es necesario para que el texto se convierta en código, sino para que se muestre como tal en la página. El navegador usará el estilo que tenga asignado para el código, pero sobre todo otros sistemas como robots que lean la página podrán saber que ese bloque de texto es un bloque de código.

Para que lo tengas más claro te pongo un ejemplo sobre cómo podría quedar más o menos un bloque de código HTML, para que se vea correctamente en un documento HTML al mostrarse en el navegador.

<pre><code>&lt;ul&gt;
  &lt;li&gt;Item 1 &lt;b&gt;Se muestra el código&lt;/b&gt;&lt;/li&gt;
  &lt;li&gt;Item 2 &lt;i&gt;HTML como código&lt;/i&gt;&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;</code></pre>
Salva
223 3 15 1

También te recomiendo estudiar alguna librería que permita colorear la sintaxis de tu código. Una muy conocida es prism.js

https://prismjs.com/

En DesarrolloWeb.com la encuentras explicada en este artículo Tutorial de uso de Prism para syntax highlight.

Alberto
269 8 17 10