Etiquetas pre y code, propiedad overflow en post blogger

Uno de los problemas al que solemos enfrentarnos cuando en un post de blogger incluimos un fragmento de código de algún lenguaje de programación, es la dificultad de incluir tabulaciones o espacios, que hagan más legible el código mostrado. Si el lenguaje además es sensible a las indentaciones, como por ejemplo Python, buscar una solución al mismo es necesaria.

 Para resolver este problema, hago uso de las etiquetas <pre><code>, por ese orden en las que encierro el código que previamente he escrito en mi editor favorito, cada uno tiene el o los suyos, encerrándolo a continuación con </code></pre>. De esta manera el código es mostrado tal y como lo hemos escrito, e incluso puede ser copiado para ser ejecutado sin la menor complicación.

 Pero si se accede al post desde otros dispositivos diferentes a un ordenador, como pueden ser una tablet o un teléfono móvil, es corriente que el texto formateado, no se visualice correctamente. Hay entra en juego el uso de la propiedad Css overflow.

La overflow especifica si se debe recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en el área especificada y tiene los valores siguientes:

visible - El desbordamiento no está recortado. El contenido se representa fuera del cuadro del elemento. Default
hidden - El desbordamiento se recorta y el resto del contenido será invisible.
scroll - El desbordamiento se recorta y se agrega una barra de desplazamiento para ver el resto del contenido
auto- Similar a scroll, pero agrega barras de desplazamiento solo cuando es necesario

A continuación ejemplo de código para solucionar lo anteriormente expuesto

<style>
 .myo {
    margin: .5em 0 1.5em;
    border-bottom: 1px dotted #333333;
    padding-bottom: 1.5em;
    width: 100%;
    overflow: auto;
    }
</style>
<div class='myo>
<pre>
<code>

Este es el código
    que tiene indentaciones
    esta es igual
        y esta es una mayor que las dos anteriores

Fin del código

</code>

</pre>

</div>