Mostrar código con formato en una entrada del blog

Para escribir una entrada en el blog en la que se incluye código y se desea mostrar con un formato que lo diferencie, se puede utilizar la siguiente forma:

1) Escribir el código entre las etiquetas «pre» y «code». «code» indica que es código y «pre» nos facilita la interpretación de este, por ejemplo, evitando así la necesidad de incluir saltos de línea con formato html.
2) Aplicar estilos CSS.

Por ejemplo para mostrar el texto de la siguiente forma:

#!/bin/bash

echo ¡Hola mundo cruel!

El código utilizado es el siguiente:

<div id="codigo">
<pre><code>
#!/bin/bash

echo ¡Hola mundo cruel!

</code>
</pre>
</div>

<style>
#codigo{
color:#ffffff;
background:#000000;
}
</style>

Enlaces relacionados:
Mostrar HTML en una página web
Mostrar etiquetas html <>, sin que sean interpretadas por el navegador