Resaltado de sintaxis profesional para tu blog utilizando únicamente CSS

Para añadir un resaltado de sintaxis profesional a tu blog de Blogger utilizando únicamente CSS personalizado y las etiquetas HTML y , tienes dos caminos: el manual (estilizado puro) o el uso de una librería ligera. Aquí te presento la mejor forma de hacerlo para que tu código sea legible y estético. 

1. Configuración del diseño (CSS Personalizado) 
Blogger suele tratar las etiquetas de forma muy básica. Para que parezca un editor de código real, añade este código en tu plantilla (Tema > Personalizar > Opciones avanzadas > Añadir CSS):

/* Contenedor del bloque de código */
pre {
    background-color: #282c34; /* Color de fondo oscuro (estilo One Dark) */
    color: #abb2bf;           /* Color de texto base */
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;         /* Barra de desplazamiento horizontal */
    margin: 20px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    border-left: 5px solid #61afef; /* Línea decorativa lateral */
}

/* Estilo para la etiqueta code dentro de pre */
pre code {
    background: none;
    padding: 0;
    color: inherit;
    white-space: pre;
}

2. Cómo escribir el código en tus entradas
Cuando estés redactando una entrada en Blogger, cambia a la Vista HTML y utiliza la siguiente estructura:

<pre><code>
tu_codigo_aqui
</code></pre>

Nota importante: Para que los símbolos como < o > no rompan el HTML de tu blog, debes "escapar" el código. Por ejemplo, escribe &lt;; en lugar de <. 

 3. La solución recomendada:
Highlight.js Si quieres que las palabras clave (como if, function, var) tengan colores diferentes automáticamente sin tener que editar cada palabra a mano, lo mejor es usar Highlight.js. Es ligero y no ralentiza tu blog. Paso A: Añadir la librería Ve a Tema > Editar HTML y pega esto justo antes de la etiqueta </head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

Paso B: Uso en tus posts Ahora, simplemente etiqueta tu código con la clase del lenguaje que uses:

<pre><code class="language-javascript">
function saludar() {
  console.log("¡Hola, Blogger!");
}
</code></pre>