Códigos HTML bien representados en las entradas de Blogger

Muchos utilizan un cuadro de texto para mostrar un código HTML, pero esto tiene un problema, en algunos códigos, el formato se pierde o este simplemente queda inutilizable.

Encontré una manera de mostrar códigos HTML mediante un scroll horizontal, para que quede mas claro, que se vean así:



De esta forma códigos largos se muestran correctamente ya que no hay que aplicarles formatos y no se deforman.

¿En qué consta este cuadro con desplazamiento horizontal?

Aclaro que esto es un iFrame, por lo que de hecho estoy mostrando un documento de texto .txt que subí a un servidor de archivos y el iFrame lo representa.

¿Cómo utilizar el iFrame?

En un post anterior mostraba como utilizar este iFrame para mostrar una página web dentro de otra, pero en esta oportunidad la utilizaremos para mostrar un documento de texto plano .txt

Lo que necesitaremos será el código del iFrame:

<iframe height="90" src="url-del-documento-de-texto.txt" width="90%"></iframe>

Junto con el código, deberás buscar un servidor que permita subir el documento en formato .txt con el código HTML que desees mostrar literalmente, recomiendo My DataNest, ya que permite toda clase de archivos.

¿Cómo utilizar el código?

Primero en la entrada, cambiamos a ''Edición de HTML'' y pegaremos el código del iFrame, la parte del código que dice ''url-del-documento-de-texto.txt'' deberás reemplazarla por la URL del documento de texto que contenga el código HTML.


Bueno, ese es el tutorial, recordar que al momento de querer divulgarlo en otro lado, recuerda citar la fuente, las obras de Ayuda Bloggers están bajo Licencia CC.