Mostrar código fuente en las entradas de Blogger

Truco simple de realizar. Hoy te enseñaré cómo mostrar el código fuente en una entrada de Blogger. Es muy sencillo y tenes los ejemplos funcionando en este mismo post. Ideal si queres hacer tutoriales sobre programación o diseño web.

PD: me encontré con muchos sitios que explican cómo colocar el CSS y HTML correspondiente, pero que omiten un código vital para inhabilitar el funcionamiento de los scripts y sin el cual la siguiente explicación perdería sentido.

Para empezar hacé clic en Plantilla y luego en Editar HTML. Una vez ahí, se abrirá una ventana con el código de todo tu blog, hacé clic sobre la misma y seguido de ello Ctrl + F. Aparecerá un buscador, en el escribe ]]> todo lo que se encuentre arriba de este código es el CSS del blog, y es donde debes colocar lo siguiente:

/* CODIGO
------------------------------------------------------------------------------------- */
pre {
padding-top:20px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto;
background: #F4D3B0;
border: 0px solid rgb(204, 204, 204);
color:#7f7f7f;
font-size:12px;
display:block;
max-height:350px; /* No tocar */
padding:5px; 
white-space:pre; /* No tocar */
text-align:left;
min-height:43px;
width:98%;
}
code:hover { /* Cuando pasa el cursor */
background: #F4D3B0;
}
pre.html { /* Código para HTML */
background:#F6E3CE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDx9kblYWNywxvZuEwpHOeR8sxSo19ZxdtWhrPYBSJFKobreA-l9bjkyY_vsl7Lm_G3w9JdzRJVNwQbezQy9cohxqtPWKJCg0rkJwWoE-TYTqvFSOMzjpFO-sl_pHeiwwfa9hyyvpndGeR/s1600/HTML.png) no-repeat scroll left top;
}
pre.css { /* Código para CSS */
background:#F6E3CE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguTJ8T5srhAodYqmkor5wpeaCEuh-02SIHAzToTuR9qNEqIV54LE44Q69HTNSxx7onDJnOyUWOFDxv8b0qPjg7x3TSRhx5sMCJfDut2iLLIxfPjCPCqTlHWFAkDsXAGnDCqXMCWuwy2yXM/s1600/CSS.png) no-repeat scroll left top;
}
pre.js { /* Código para JavaScript */
background:#F6E3CE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiebDveAIupVuHI1FuNzV9sZ5lgCk4tXzdEXVERJwmU5DVlFXUaKoqd8RY-vN2hPVMwyWnBVnF2tK3Mjk7rlw4H1VCK6hn7LV9jedgcrqscYrck-g_6rh0W2Iw-HNXVPCqSQ-j-rgNfUIGz/s1600/JAVASCRIPT.png) no-repeat scroll left top;
}

Una vez hecho esto guardas y ya tenes todo el diseño del cuadro en el que mostrarás los códigos, después es cuestión de que te pongas a jugar con el CSS, hasta encontrar el estilo deseado.

Ahora, lo que faltaría es hacer que funcione, emplearlo en tus posts, para ello dirígete a una entrada, y en el apartado HTML coloca lo siguiente:

<pre class="css"><code>
Aquí el código que quiero mostrar de CSS.
</code></pre>

<pre class="html"><code>
Aquí el código que quiero mostrar de HTML.>
</code></pre>

<pre class="js"><code>
Aquí el código que quiero mostrar de JavaScript.
</code></pre>

Unas líneas más arriba te hablaba sobre un código vital, bueno, ese “código vital” no afecta al CSS, pero si al HTML y al JavaScript. Si yo deseo mostrar en mis entradas estos últimos dos lenguajes, es necesario inhabilitar su función, de lo contrario Blogger los leerá, activará y no podré verlos. Para evitar que Blogger los active debes reemplazar todos los "<" y los ">" por lo siguiente: