Insertar código en Blogger

Bloque de código en Nichoclean v2.0

La plantilla Nichoclean v2.0 permite insertar bloques de código fácilmente usando la estructura estándar <pre><code>. Este tipo de bloques mantiene el formato original del código, incluyendo espacios, saltos de línea y sangrías, y permite que los lectores copien el contenido rápidamente gracias al botón “Copiar”.

Cómo insertar un bloque de código

Para crear un bloque de código con formato y resaltado, simplemente coloca tu snippet dentro de la estructura HTML siguiente:

<pre><code>
// Aquí tu código a compartir
</code></pre>

Este bloque se puede colocar en cualquier post, página estática o índice de tu blog sin necesidad de envolverlo en un div adicional. El JS de Nichoclean v2.0 se encargará de generar automáticamente el wrapper y el botón de copiar.

JS para botón “Copiar”

La funcionalidad de copiar se maneja con el siguiente script, que crea el botón solo si existe contenido en el bloque:

<!-- Script copiar código - Nichoclean v2.0 -->
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function () {

  // Selecciona todos los bloques <pre><code>
  const codeBlocks = document.querySelectorAll('pre > code');
  if (codeBlocks.length === 0) return; // no hay bloques, no hacer nada

  codeBlocks.forEach(codeBlock => {

    if (codeBlock.textContent.trim() === "") return; // no añadir si está vacío

    const pre = codeBlock.parentElement;

    // Crear wrapper si no existe
    let wrap = pre.parentElement;
    if (!wrap.classList.contains('code-wrap')) {
      wrap = document.createElement('div');
      wrap.className = 'code-wrap';
      pre.parentNode.insertBefore(wrap, pre);
      wrap.appendChild(pre);
    }

    // Evitar botones duplicados
    if (wrap.querySelector('.copy-btn')) return;

    // Crear botón
    const button = document.createElement('button');
    button.className = 'copy-btn';
    button.textContent = 'Copiar';

    // Evento copiar
    button.addEventListener('click', () => {
      navigator.clipboard.writeText(codeBlock.textContent)
        .then(() => {
          button.textContent = 'Copiado';
          setTimeout(() => button.textContent = 'Copiar', 2000);
        })
        .catch(() => {
          button.textContent = 'Error';
          setTimeout(() => button.textContent = 'Copiar', 2000);
        });
    });

    // Insertar botón en el wrapper (no dentro del pre)
    wrap.appendChild(button);

  });

});
//]]>
</script>

Personalización y recomendaciones

  • Puedes modificar el color de fondo y el color del texto desde CSS para adaptarlo a tu estilo minimalista.
  • El botón “Copiar” se puede renombrar según tus preferencias.
  • El bloque mantiene scroll horizontal para líneas largas, asegurando que el botón se mantenga fijo y no tape el código.

Tip: si el código que deseas compartir genera conflictos al ejecutarse, se recomienda parsearlo previamente utilizando la herramienta Convertir Códigos HTML a XML para Blogger y WordPress. Luego, simplemente coloca el resultado dentro de tu bloque <pre><code> para asegurar que se muestre correctamente.

Con esta variante de bloque de código, Nichoclean v2.0 ofrece una experiencia limpia, minimalista y funcional para insertar snippets de código en tu blog, optimizada tanto para SEO como para usabilidad.