html - significado - etiqueta span

¿Cómo se muestra la etiqueta<div> literalmente en la etiqueta<code>/<pre>?

Question

Estoy usando la etiqueta <code> dentro de una etiqueta <pre> para mostrar el código en mi blog blogger. Desafortunadamente no funciona con etiquetas HTML. ¿Hay alguna forma de mostrar " <div> " dentro de la etiqueta <pre> o <code> sin interpretarlo realmente como HTML? Esto es lo que hago ahora mismo:

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

Lo cual funciona bien para todo excepto HTML. ¿Alguna idea de cómo lograr esto? Gracias.

Answer 1

Desafortunadamente no funciona con etiquetas HTML.

<code> significa "Esto es código", <pre> significa "El espacio en blanco en este marcado es significativo". Ninguno de los dos significa "El contenido de este elemento no debe tratarse como HTML", por lo que ambos funcionan perfectamente, incluso si no significan lo que usted quiere que signifiquen.

¿Hay alguna forma de mostrar " <div> " dentro de la etiqueta <pre> o <code> sin interpretarlo realmente como HTML?

Si quieres renderizar un caracter < , entonces usa < , con > para > y & para & .

No puede (en HTML moderno) escribir marcas y hacer que se interprete como texto.

Answer 2

Parece que un textarea de solo lectura hace más o menos lo que quieres.

<textarea readonly> <!-- html code --> </textarea>

Answer 3

Pruebe CodeMirror ( https://codemirror.net/ )

Es una biblioteca liviana que codifica los estilos en HTML. Aquí hay una captura de pantalla de a lo que me refiero:

Funcionó bien para nosotros!

Answer 4

Puedes usar el elemento "xmp". El <xmp></xmp> ha estado en HTML desde el principio y es compatible con todos los navegadores. Incluso no debería usarse, es ampliamente compatible.

Todo lo que está dentro de <xmp></xmp> se toma como está (no se reconocen las etiquetas <xmp></xmp> o referencias de caracteres) excepto, por razones aparentes, la etiqueta final del elemento en sí.

De lo contrario, "xmp" se representa como "pre".

Answer 5

Sí, con una función de escape xml. Sin embargo, deberá tener jQuery habilitado para que funcione.

<pre>
  ${fn:escapeXml(''
    <!-- all your code -->
  '')};
</pre>

Answer 6

Solo escapa de las etiquetas HTML. Por ejemplo -

Reemplace < con <

Reemplazar > con >

Búsqueda completa here

Answer 7

Tratar:

<xmp></xmp>

por ejemplo:

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

adiós