Cómo mostrar código HTML sin formato en una página HTML

⏰ 2 minutos de lectura

avatar de usuario
steven

¿Cómo puedo mostrar fragmentos de HTML en una página web sin necesidad de reemplazar cada uno? < con &lt; y > con &gt;?

En otras palabras, ¿hay una etiqueta para no renderice HTML hasta que presione la etiqueta de cierre?

El método probado y verdadero para HTML:

  1. Reemplace la & personaje con &amp;
  2. Reemplace la < personaje con &lt;
  3. Reemplace la > personaje con &gt;
  4. Opcionalmente, rodee su muestra de HTML con <pre> y/o <code> etiquetas

  • Sugerencia: para acelerar el reemplazo del código HTML, puede usar Notepad ++ con la extensión ‘TextFX’. Marque el texto, vaya al menú >TextFX >TextFX Convert >Codificar HTML (&<>“) → Listo.

    – avatar

    13 de enero de 2013 a las 18:07

  • ¿Hay alguna biblioteca de JavaScript existente que pueda hacer esto, por casualidad?

    –Anderson Green

    12/04/2013 a las 22:42

  • Esto no responde a la pregunta, que decía “sin necesidad de reemplazar…”. Además, reemplazar “>” es innecesario.

    – Jukka K. Korpela

    24 de abril de 2014 a las 11:19

  • Y el orden también es importante. Asegúrate de manejar el & primero y < después.

    – Tolga Evcimen

    18 de junio de 2015 a las 5:34

  • @AndersonGreen Aquí está la biblioteca: export const escapeHtml = str => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'). Tal vez alguien debería crear un paquete NPM para él, como left-pad? 😆

    – Lionel Rowe

    10 sep 2020 a las 20:01

avatar de usuario
Erfan Safarpoor

muestra 1:

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

muestra 2:

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

muestra 3: (Si en realidad está “citando” un bloque de código, entonces el marcado sería)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

  • Los elementos utilizados en la respuesta no abordan la pregunta en absoluto: no afectan la interpretación de “<" al comienzo de una etiqueta.

    – Jukka K. Korpela

    24 de abril de 2014 a las 11:17

  • desarrollador.mozilla.org/en-US/docs/Web/HTML/Element/xmp dice, “No utilices este elemento.. Ha quedado en desuso desde HTML3.2 y no se implementó de manera coherente. Se eliminó por completo del lenguaje en HTML5″.

    – Nick Arroz

    1 de agosto de 2018 a las 8:40

  • Usé el CSS publicado, gracias, solucionó muchos problemas de diseño.

    – Basheer AL-MOMANI

    31 de agosto de 2020 a las 9:41

avatar de usuario
Konrad Rodolfo

hay una etiqueta para ¿No renderizas HTML hasta que presionas la etiqueta de cierre?

No, no hay. En HTML propiamente dicho, no hay forma de escapar de algunos caracteres:

  • & como &amp;
  • < como &lt;

(Por cierto, no hay necesidad de escapar > pero la gente a menudo lo hace por razones de simetría.)

Y, por supuesto, debe rodear el código HTML escapado resultante dentro <pre><code>…</code></pre> para (a) preservar los espacios en blanco y los saltos de línea, y (b) marcarlo como un elemento de código.

Todas las demás soluciones, como envolver su código en un <textarea> o el (obsoleto) <xmp> elemento, romperá.1

XHTML que se declara al navegador como XML (a través de HTTP Content-Type ¡encabezamiento! simplemente estableciendo un DOCTYPE es no es suficiente) podría usar alternativamente una sección CDATA:

<![CDATA[Your <code> here]]>

Pero esto solo funciona en XML, no en HTML, e incluso esta no es una solución infalible, ya que el código no debe contener el delimitador de cierre. ]]>. Entonces, incluso en XML, la solución más simple y robusta es escapar.

1 Caso en punto:

textarea {border: none; width: 100%;}
<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

  • Lindo. Entonces, ¿eso es parte del estándar HTML? ¿O es más profundo, como parte del estándar xml?

    – aioobe

    12 mayo 2010 a las 15:50

  • En HTML, esto representará ` here]]>`

    – Delfín

    12 de mayo de 2010 a las 16:03

  • Sí, esta es una buena respuesta, pero no olvides reemplazar > con &gt;

    – Alan

    28 de julio de 2016 a las 13:13

  • @Alan Yo también haría esto, pero en realidad no es necesario: solamente < y & necesita ser reemplazado, sin escape > es válido dentro de HTML.

    – Konrad Rodolfo

    28 de julio de 2016 a las 13:25

  • @SamWatkins Pero tu solución no es mas facil que el mio. acabas de cambiar qué hay que escapar, y tu solución es hacky, como admites. Literalmente no hay ninguna ventaja sobre hacerlo correctamente. Este es un problema resuelto con una solución correcta. No hay necesidad de piratear, a menos que toda su configuración sea pirateada.

    – Konrad Rodolfo

    3 de junio de 2020 a las 8:28

avatar de usuario
Krunal

Una especie de método ingenuo para mostrar el código lo incluirá en un área de texto y agregará un atributo deshabilitado para que no sea editable.

<textarea disabled> code </textarea>

Espero que ayude a alguien que busca una manera fácil de hacer las cosas.

avatar de usuario
s_hewitt

Obsoletopero funciona en FF3 e IE8.

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

Recomendado:

<pre><code>
    code here, escape it yourself.
</code></pre>

avatar de usuario
barnameha

solía <xmp> como esto:
http://jsfiddle.net/barnameha/hF985/1/

avatar de usuario
eric leschinski

el obsoleto <xmp> La etiqueta esencialmente hace eso, pero ya no es parte de la especificación XHTML. Sin embargo, aún debería funcionar en todos los navegadores actuales.

Aquí hay otra idea, un truco de hack/parlor, podrías poner el código en un área de texto así:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

Poner corchetes angulares y código como este dentro de un área de texto es HTML no válido y causará un comportamiento indefinido en diferentes navegadores. En Internet Explorer se interpreta el HTML, mientras que Mozilla, Chrome y Safari lo dejan sin interpretar.

Si desea que no sea editable y se vea diferente, puede diseñarlo fácilmente con CSS. El único problema sería que los navegadores agregarán ese pequeño controlador de arrastre en la esquina inferior derecha para cambiar el tamaño del cuadro. O alternativamente, intente usar una etiqueta de entrada en su lugar.

La forma correcta de inyectar código en su área de texto es usar un lenguaje del lado del servidor como este PHP, por ejemplo:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

Luego omite el intérprete html y coloca el texto no interpretado en el área de texto de manera consistente en todos los navegadores.

Aparte de eso, la única forma es realmente escapar del código usted mismo si es HTML estático o usar métodos del lado del servidor como HtmlEncode() de .NET si usa dicha tecnología.

  • esta es una idea horrible. ¿Qué pasa si se muestra HTML dinámico y alguien hizo lo siguiente?