Cuadros de código en Blogger

Por fin he conseguido añadir cuadros de lineas de código en una entrada de Blogger. El proceso que he visto más facil es utilizando CSS, y aquí voy a explicar el proceso.

1. En el panel izquierdo de Blogger, entramos en "Tema".
2. Hacemos clic en el botón naranja que dice "Personalizar" (no en la flecha, haz clic directamente en la palabra).
3. Se abrirá el menú de configuración del tema. En el menú de la izquierda, haz clic en Opciones avanzadas (o Avanzado).
4. Lo primero que aparece es un menú desplegable de opciones. Tenemos que buscar la que dice Añadir CSS (suele estar al final de la lista).
5. En el cuadro en blanco que aparece, tendremos que pegar el siguiente código:

pre.code-box {
  background-color: #f4f4f4;
  border-left: 4px solid #007acc;
  color: #333;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  padding: 15px;
  overflow: auto;
  white-space: pre;
  border-radius: 4px;
  margin: 20px 0;
}

Ahora haremos clic en guardar (el disco que está abajo a la derecha). Con esto hemos añadido el código css a nuestra plantilla.

Cuando queramos añadir un cuadro de código en una entrada, este tendrá que ir entre estas dos etiquetas:

    <pre class="code-box">

    Tu código va aquí...

    ¡Y mantendrá los saltos de línea y espacios!

    </pre>

Esto lo haremos cambiando de la vista de redacción a la vista en HTML (pulsando en el lápiz que está al principio del menú superior).

Algo importante a tener en cuenta: Si tu código incluye símbolos como < o >, Blogger puede confundirlos con código de la propia página y romper el diseño. Para evitarlo, antes de pegar tu código en el editor HTML, pásalo por una herramienta web como HTML Encoder , HTML Escape (o cualquier "convertidor de código a HTML") para que transforme esos símbolos en texto seguro.

Un último detalle: el código css que hemos introducido, crea un cuadro con fondo oscuro y texto claro, porque mi página es oscura. Si tu página es de tonos claros, puedes cambiar los códigos de color de fonto, texto, etc, del código css.

Todo esto es un poco engorroso, pero Blogger es así, no se caracteriza por facilitar las cosas.