Come aggiungere uno snippet di codice usando Gutenberg su WordPress

Quasi tutti i blogger, creatori di contenuto oppure gli sviluppatori di tecnologia a volte hanno bisogno di visualizzare snippet di codice evidenziati sul loro blog. Questo può essere un mal di testa in sé. Tuttavia, potrebbe anche essere necessario evidenziare una o più righe in questo snippet e questa funzionalità purtroppo non fa parte della maggior parte delle integrazioni di codice. Fortunatamente esiste il plugin SyntaxHighlighter Evolved. Ti mostreremo come usarlo per mantenere il codice il più pulito e leggibile possibile.

Sintassi Evidenziatore evoluto

L'installazione e l'attivazione del plugin è semplice. Puoi trovarlo nel repository dei plugin di WP.org ma assicurati che sia ben fatto Alex Mills (Viper007Bond), perché in effetti ci sono molti risultati. Sappiamo, tuttavia, che è affidabile e aggiornato. Inoltre, questo viene fornito con un blocco specializzato per l'editor Gutenberg. Per non parlare di una serie di parametri che ti consentono di personalizzare la tua esperienza, il che la rende la nostra scelta per questo tipo di attività.

Nel menu Parametri della dashboard di WordPress, troverai un nuovo elemento chiamato SyntaxHighlighter . Vai avanti e fai clic su di esso. Lì puoi regolare ogni piccola cosa di cui avrai bisogno per incorporare gli snippet nel tuo sito WordPress.

Sintassi Impostazioni dell'evidenziatore

La pagina delle impostazioni per il plugin è relativamente semplice. Un elemento particolare che ci piace di questo plugin è che ottieni un buon numero di personalizzazioni riguardo a come il codice viene visualizzato sul tuo sito. Puoi aggiungere classi CSS all'incorporamento, regolare il riempimento del numero di riga, scegliere temi colore, utilizzare smart tab e interruzioni di riga e decidere come caricare l'evidenziazione del linguaggio di codifica a livello di sito.

Vogliamo definire tre parametri particolari che la maggior parte delle persone dovrebbe conoscere.

Versione plug-in, numeri di riga e dimensioni delle schede

La prima è la versione del plugin che stai caricando. Sebbene il plug-in rimanga aggiornato nel repository, puoi scegliere tra le versioni 2.x e 3.x del plug-in , a seconda di come desideri visualizzare il tuo codice. Entrambi sono sicuri, tuttavia, offrono ciascuno funzionalità specifiche che l'altro non offre (al momento della scrittura).

Se gli utenti copiano il tuo codice è il più importante, la versione 3.x lo farà. Tuttavia, se il tuo è più utile per la visualizzazione rispetto all'utilità effettiva, la nuova riga nella versione 2.x potrebbe essere migliore per te, poiché elimina la necessità di utilizzare le barre di scorrimento. per frammenti di codice di grandi dimensioni.

Quindi è necessario visualizzare o meno i numeri di riga. Per grandi blocchi di codice e tutorial, i numeri di riga sono inestimabili. Tuttavia, quando si dispone di frammenti brevi, non è necessario etichettarli in modo permanente come righe 1 e 2. La loro rimozione può migliorare notevolmente l'aspetto del codice.

E poi c'è il dimensione della scheda ancora controverso. L'opzione predefinita è 4, ma puoi cambiarla con qualsiasi numero tu voglia. Compreso il valore corretto di 2. (Sì, ci rendiamo conto che non esiste un valore corretto. Ci piacciono solo 2 spazi per le tabulazioni).

Il tuo codice e codici brevi

Se scorri fino in fondo alla pagina Parametri , vedrai un'anteprima del codice di grandi dimensioni, oltre a un gran numero di parametri dello shortcode. Il tuo tempo sarebbe ben speso a esaminarli, solo per vedere cosa può fare tutto il plug-in per mostrare i tuoi snippet. Inoltre, tutte le modifiche apportate in precedenza alla visualizzazione del codice nelle impostazioni precedenti verranno riportate qui. Quindi assicurati di premere Salva dopo aver modificato una delle opzioni.

Sebbene alcune persone non siano le più grandi fan degli shortcode perché possono collegarti a determinati plugin, pensiamo che valga la pena utilizzarli perché sono intelligenti e facili da ricordare. Se non altro, devi ricordare due cose e quindi il plugin funzionerà al meglio per te.

ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>

O alcune variazioni. Se ricordi, sei sicuro delle diverse cose che puoi fare con questo plugin. Sebbene sia possibile utilizzare un identificatore lungo, il plug-in SyntaxHighlighter è costruito abbastanza bene da semplificare il tuo lavoro.

Usa i codici funzione

Ovunque tu possa eseguire il rendering di uno shortcode, puoi usarli. In Divi o l'editor classico, puoi utilizzare il modulo Text o l'editor TinyMCE e incollare semplicemente il codice tra gli shortcode. A causa del funzionamento della scheda Visuale, suggeriamo di utilizzare la scheda Testo per mantenere questi caratteri speciali di formattazione.

Se sei un utente Gutenberg / Block Editor, le cose sono così semplici. Puoi, ancora una volta, utilizzare il blocco di testo per questo. Ancora più semplice, il blocco HTML personalizzato. Come sopra, incolla il codice nei tag shortcode.

Meglio ancora, il blocco SyntaxHighlighter Evolved è esso stesso. L'installazione del plug-in include il proprio blocco Gutenberg; quindi, se non sei uno shortcode e non vuoi scherzare con le impostazioni, non devi. Trova il blocco sotto formattazione e inseriscilo nel tuo messaggio o pagina.

Indipendentemente da come inserisci il codice, vedrai lo stesso rendering sul front-end del tuo sito WordPress.

Riassumendo

Potrebbe essere necessario presentare snippet al tuo pubblico per una serie di motivi. Forse scrivi tutorial o pubblichi soluzioni a problemi comuni che il pubblico può prendere e utilizzare a suo piacimento? Ma a volte un'integrazione GitHub non fornisce il tipo di esperienza che desideri per i tuoi utenti. Questo è quando hai bisogno di un plugin come SyntaxHighlighter Evolved. 

In pochi clic, con un po 'di personalizzazione e un blocco o shortcode Gutenberg, il tuo pubblico esplorerà il tuo codice senza problemi.