Postear codigos fuentes en html

Hace ya varios meses que el tema de como postear los codigo en html me estaba volviendo loco, debido a que el uso de espacios antes de un texto cualquiera es ignorado, no podia respetar la identacion que debe tener cada bucle, en algunos lenguajes como C/C++, la identacion puede ser ignorada, es simplemente buena practica, pero en lenguajes como Python es obligatoria.

La solucion que estaba ocupando era usar la etiquita div, y de esa manera darle a cada bloque un margen de 10 pixeles mas respecto al anterior, lo hacia de la siguiente manera:

div style="margin-left: 10px;"
obiamente entre <> pero si los pongo en el ejemplo se formatea mi texto y queda invisible.

pero el problema de esta solucion es que los espacios son virtuales, realmente no existen, son solo una capa de estilo y si deseascopiar el codigo de la pagina y pegarlo en otra parte la identacion se suprime.

Hoy por fin encontre la solucion. Es ocupando la etiqueta pre.

De esta manera se respeta al 100% el codigo que tu escribas, pero cuidado si escribes una linea muy larga la pagina puede adquirir un scroll horizontal muy grande y eso es incomodo para los lectores, de hecho de por si el scroll horizontal para un texto es mala idea, evitalo.

aqui va una prueba para que lo vean funcionando


sin etiqueta pre:
hola
hola
hola
hola

con etiqueta pre:
 hola
  hola
   hola
    hola

Saludos.