Come posso stilizzare i blocchi di codice (snippet) nei post di Blogger aggiungendo un pulsante per copiarli con un clic?

Per stilizzare i blocchi di codice (<pre> e <code>) all'interno dei post di Blogger e aggiungere automaticamente un pulsante per copiarne il contenuto con un clic, puoi combinare un foglio di stile CSS personalizzato con uno script JavaScript leggero.

Questo script rileverà automaticamente ogni blocco di codice nei tuoi articoli, aggiungendo una barra superiore con un pulsante di copia interattivo senza che tu debba modificare manualmente l'HTML di ogni singolo post.

1.Aggiungi la grafica dei blocchi di codice:Codice CSS.

Accedi a Blogger, vai su Tema > Modifica HTML, individua il tag ]]></b:skin> e inserisci subito prima questo codice CSS per definire l'aspetto pulito e moderno (compatibile anche con la modalità scura):

CSS

/* Contenitore principale del blocco di codice */
.code-container {
  margin: 24px 0;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e5e7eb);
  background-color: var(--card-bg, #1e1e1e);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* Barra superiore con intestazione e pulsante */
.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: rgba(128, 128, 128, 0.1);
  border-bottom: 1px solid var(--border-color, #333333);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-color, #9ca3af);
}

/* Pulsante Copia */
.copy-btn {
  background: transparent;
  border: 1px solid var(--border-color, #4b5563);
  color: var(--text-color, #e5e7eb);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #2563eb;
}

/* Stile interno del tag pre nei post */
.post-body pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #d4d4d4;
  background: transparent !important;
  border: none !important;
}

.post-body code {
  font-family: inherit;
  background: transparent;
}

Verifica: Il CSS sfrutta le variabili del tema per integrarsi perfettamente con la modalità scura e chiara.

2.Aggiungi lo script di automazione e copia:Logica JavaScript.

Sempre nell'editor HTML, posizionati subito prima del tag di chiusura </body> e incolla questo script. Si occuperà di avvolgere automaticamente tutti i tag <pre> del post nel nuovo contenitore e di gestire la copia negli appunti tramite l'API nativa del browser:

HTML

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const postBody = document.querySelector(".post-body");
    if (!postBody) return;

    const preElements = postBody.querySelectorAll("pre");
    preElements.forEach(pre => {
      // Evita doppie esecuzioni sullo stesso elemento
      if (pre.parentNode.classList && pre.parentNode.classList.contains("code-container")) return;

      // Crea il contenitore strutturale
      const container = document.createElement("div");
      container.className = "code-container";

      // Crea l'header superiore
      const header = document.createElement("div");
      header.className = "code-header";
      header.innerHTML = '<span>Snippet di Codice</span>';

      // Crea il pulsante di copia
      const copyBtn = document.createElement("button");
      copyBtn.className = "copy-btn";
      copyBtn.textContent = "Copia";

      copyBtn.addEventListener("click", function() {
        const codeText = pre.innerText;
        navigator.clipboard.writeText(codeText).then(() => {
          copyBtn.textContent = "Copiato! ✓";
          setTimeout(() => {
            copyBtn.textContent = "Copia";
          }, 2000);
        }).catch(err => {
          console.error("Errore durante la copia del codice:", err);
        });
      });

      header.appendChild(copyBtn);

      // Inserisce il blocco nel DOM
      pre.parentNode.insertBefore(container, pre);
      container.appendChild(header);
      container.appendChild(pre);
    });
  });
</script>

Verifica: Lo script agisce in modo indipendente su ogni articolo, aggiungendo intestazione e pulsante interattivo a ogni blocco di codice trovato.

3.Salva le modifiche sul tema:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare il tema di Blogger.

Verifica: Aprendo un articolo che contiene frammenti di codice, vedrai apparire una barra pulita con il pulsante "Copia". Cliccandoci sopra, il testo verrà copiato istantaneamente e il pulsante confermerà l'azione con la scritta "Copiato! ✓".