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 tienes los ejemplos funcionando en este mismo post. Ideal si quieres hacer tutoriales sobre programación.

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 haz clic en Plantilla y luego en Editar HTML. Una vez ahí, se abrirá una ventana con el código de todo tu blog, haz clic sobre la misma y seguido de ello Ctrl + F. Aparecerá un buscador, en el escribe ]]></b:skin> 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/AVvXsEgy9JSujJ3t0Ga3o5PxUjgw5Cqe8XbL9Z92ZASEOYFsXpUj7n2XTT4yxIGIacw4wNMFi7sGXU-2e3s9QkSIIvGiVMccOWhquMGv6yAUP3fXBtWNNAAP_dfUi8oOVZhNnrs3S0785hnTYwFI/s1600/HTML.png) no-repeat scroll left top;
}
pre.css { /* Código para CSS */
background:#F6E3CE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT8Tf6u0zhBdaFOvMwzi8aReKPdrJLyCyAidVdtbAnO3U0AG1pdfGU3x3vOEGs447qoEYQq3To2uPVrhHh940v-rOJFPH_3RYSQtD9xdClPJXWVQ5UDt4z-MKzTUEwp3A_DZAYSH9cdALY/s1600/CSS.png) no-repeat scroll left top;
}
pre.js { /* Código para JavaScript */
background:#F6E3CE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXiHJHUabc6B-YQnDGusPabhGf9uBSDK3JKpGyjqtjytXxN0IRMOvCF1aXYjlCU6WF23DSKajtD-5AR2qZNqfOffAJAViG9fbS7T0r0d_AlgSt7p1JLci7OY_MdZOAPN2_nhVx2RIZElnc/s1600/JAVASCRIPT.png) no-repeat scroll left top;
}

Una vez hecho esto guardas y ya tienes 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 (vieja o nueva), 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: