Mostrar código HTML en una web

Hace poco en mi trabajo tuve que mostrar un bloque de código HTML en una web para que sirviera de ejemplo de uso a los usuarios que quisieran emplear el mismo. Lo que ocurre como muchos saben es que si escribimos el código tal cual el navegador interpretará el mismo con lo cual no se mostrará dicho código.

La solución viene por “escapar el código”. Normalmente esta técnica se usa para ocultar código HTML, javascript, etc. para que no pueda ser pirateado y copiado. Y aunque la técnica no es 100% segura al menos conseguirá alejar a algunos de los que lo intenten.

Pero como digo en nuestro caso, usaremos la técnica precisamente para lo contrario, es decir, poder mostrar el código a otros usuarios con fines didácticos. La solución es tan fácil como sustituir (básicamente) los caracteres ‘<’ y ‘>’ por los códigos ‘&lt;‘ y ‘&gt;‘ (sin las comillas) respectivamente.

El código que usemos lo encerraremos igualmente con la etiqueta <pre> para poder mostrar el código preformeteado y así nos respete los espacios y saltos de líneas introducidos.

De forma más o menos automática podemos usar webs como HTML Encoder que nos permitirá codificar de forma online el código. También existen otras posibilidades como Prettify que mediante javascript nos permitirá embellecer el código y numerarlo, es muy fácil de insertar. Existen obviamente otras soluciones como SyntaxHighlighter. Como siempre hay mas de un camino para llegar a la solución final.