Pintar código HTML dentro de una etiquetas pre
Si intentamos pintar código html entre las etiquetas pre probablemente el código se ejecutará en lugar de mostrarse.
La etiqueta xmp
Una forma de poder pintar código html dentro de las etiquetas pre sería la siguiente:
<span class="size-20">adaweb</span>
Para poder mostrar el código hemos utilizado la etiqueta pre y a continuación la etiqueta xmp.
El elemento HTML xmp dibuja texto entre las etiquetas de inicio y fin sin interpretar el HTML que se encuentre en medio.
Este elemento ha sido declarado obsoleto desde HTML3.2 y eliminado del lenguaje en HTML5, por lo que no se recomienda su utilización.
Entonces, ¿cómo podemos solucionar el problema?
Escapar caracteres < y >
Debemos escapar los elementos < y > y sustituírlos por < ; y > ;
<span class="size-20">adaweb</span>