Come posso integrare Prism.js per colorare automaticamente la sintassi dei blocchi di codice nei post?

in data

How to Add Prism.js Syntax Highlighting in Blogger? - DEV Community

Per integrare Prism.js ed evidenziare automaticamente la sintassi dei tuoi blocchi di codice con un tema moderno (ottimizzato anche per la modalità scura), puoi sfruttare le librerie via CDN ufficiali e unire il tutto al sistema di copia rapida che hai già configurato.

1.Aggiungi il tema grafico di Prism.js:File CSS.

Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.

Individua il tag di apertura <head> del tuo template e inserisci subito dopo il link al CSS di Prism (qui usiamo Okaidia, un tema scuro eccellente e leggibile):

HTML

<!-- Prism.js Theme CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />

Verifica: Il foglio di stile esterno viene caricato correttamente nell'intestazione del blog.

2.Aggiungi il motore e l'autoloader di Prism:Script JS.

Sempre nell'editor HTML, posizionati subito prima del tag di chiusura </body> e incolla gli script di Prism. L'autoloader riconoscerà automaticamente i linguaggi di programmazione utilizzati nei tuoi snippet (JavaScript, HTML, CSS, Python, Bash, ecc.) caricandoli al volo:

HTML

<!-- Prism.js Core & Autoloader -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

Verifica: Gli script vengono inclusi appena prima della chiusura della pagina.

3.Assicura la compatibilità con il box di copia:Integrazione Automatica.

Se scrivi i post usando i tag standard <pre><code>, a volte i blocchi potrebbero non avere una classe di linguaggio esplicita. Puoi aggiungere questo piccolo script di supporto subito sotto agli script di Prism per assegnare un linguaggio predefinito (es. markup o clike) ed evitare che i blocchi rimangano non colorati:

HTML

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Assegna una classe di default se manca, per attivare la colorazione
    const codeBlocks = document.querySelectorAll(".post-body pre code");
    codeBlocks.forEach(block => {
      if (!block.className.includes("language-")) {
        block.classList.add("language-clike");
      }
    });
    // Forza Prism a ricalcolare ed evidenziare il codice dopo l'aggiunta dinamica
    if (typeof Prism !== "undefined") {
      Prism.highlightAll();
    }
  });
</script>

Verifica: Lo script si integra perfettamente con il sistema che crea i box di copia, colorando le righe di codice in tempo reale.

4.Salva e verifica sul blog:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare il tema. Apri un articolo in cui sono presenti frammenti di codice.

Verifica: I blocchi di codice non mostrano più un testo monocromatico, ma evidenziano parole chiave, stringhe, commenti e variabili con colori brillanti, mantenendo intatto il pulsante di copia rapida.

Commenti

Posta un commento

nome-foto