Cómo agregar bloques de código en Blogger

Blogger es una de las principales plataformas de blogging a nivel mundial. Sin embargo, para el usuario común es una plataforma no muy amigable si quieres hacer algo más que solamente escribir. Un ejemplo claro de esto se puede ver en los blogs que hablan sobre la programación. Mientras otras plataformas como WordPress tienen plugins que permiten la inserción de código de una forma sencilla y amigable para el usuario, Blogger no ofrece nada similar y si quieres poder insertar código debes de hacerlo como si fuera texto simple, perdiendo la flexibilidad de estilizar o de hacer llamativo tu bloque. Hoy les mostraré como cambiar esto.

Debo dejar claro que no será una tarea tan sencilla como en otras plataformas, aunque el resultado final es el mismo, un bloque de código con un formato amigable.

Como Blogger no cuenta con un plugin/bloque de código dentro de sus herramientas predeterminadas, deberemos definir nuestro propio estilo y funcionalidad en el tema. Para ello, debemos entrar a la configuración de Tema de nuestro blog, hacer click en la flecha que se encuentra al lado de Personalizar y después en Editar HTML.

Una vez que nos muestre la página de edición de HTML, tenemos que encontrar dónde vamos a hacer nuestras modificaciones. Lo que vamos a hacer es incluir un archivo de estilo y un archivo javascript externos. El estilo, como su nombre lo dice, nos permite dar el formato deseado a nuestro bloque de código. El script, nos va a permitir incluir la funcionalidad necesaria para que se pueda aplicar el estilo correctamente.

Para agregar el estilo, en la página de edición de HTML vamos a presionar en nuestro teclado CTRL+F y vamos a escribir "</head>" y luego presionamos enter. Esto nos va a localizar la linea en el tema que incluye esa etiqueta, justo arriba de la misma debemos pegar lo siguiente: 

<!-- Code block -->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css' rel='stylesheet'/>

 Ahora para agregar el script, en la página de edición de HTML vamos a presionar en nuestro teclado CTRL+F y vamos a escribir "</body>" y luego presionamos enter. Esto nos va a localizar la linea en el tema que incluye esa etiqueta, justo arriba de la misma debemos pegar lo siguiente: 

<!-- Code block -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

Estos son los pasos iniciales para que podamos agregar bloques de código en nuestros posts. Ahora, abrimos un nuevo post y para agregar el bloque de código debemos entrar a la Vista HTML en nuestro editor. Esto es cada vez que queramos agregar código. Dentro de nuestro editor HTML debemos de pegar lo siguiente:

<pre><code>...</code></pre>

Y finalmente sustituimos los "..." por el código que queremos desplegar. Hay que tener en cuenta que al ser un editor HTML, los caracteres especiales "<" y ">" deben de ser sustituidos por sus contrapartes en Unicode (&lt; y &gt; respectivamente).

La librería usada en este tutorial es highlight js y tiene muchas opciones de personalización, estilos únicos para cada lenguaje y otras opciones. Aquí solamente cubrimos la manera de agregarlo a blogger en su forma más básica, pero vale la pena darle una leída a su documentación para aprender a usarla mejor.