Vai al contenuto principale

Come aggiungere uno snippet di codice usando Gutenberg su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Quasi tutti i blogger, i creatori di contenuti o gli sviluppatori tecnologici devono pubblicare periodicamente frammenti evidenziati sul proprio blog. Può essere un mal di testa in sé. Tuttavia, potrebbe anche essere necessario evidenziare una o più righe in questo frammento 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

Evidenziatore di sintassi

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à.

Plugin wordpress per evidenziatore di sintassi

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 plug-in è relativamente semplice. Un elemento particolare che ci piace di questo plugin è che ottieni un buon numero di personalizzazioni per quanto riguarda il modo in cui il codice viene visualizzato sul tuo sito. È possibile aggiungere classi CSS all'incorporamento, regolare il riempimento del numero di riga, scegliere temi di colore, utilizzare schede intelligenti e interruzioni di riga e decidere se caricare l'evidenziazione individuale del linguaggio di codifica. a livello di sito.

Configurazione di Syntaxhighlighter

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).

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Vedere le modifiche alla sintassi dei divi

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></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 creare uno shortcode, puoi usarli. In Divi o nell'editor classico, puoi utilizzare il modulo Testo o l'editor TinyMCE e incollare semplicemente il codice tra i codici brevi. A causa del modo in cui funziona la scheda Visuale, ti suggeriamo di utilizzare l'estensione Testo per mantenere questi caratteri speciali di formattazione.

Parametro di testo Divi

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.

Blocca html gutenberg divi

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.

Evidenziatore di sintassi gutenberg

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

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
1 azioni
quota1
Tweet
Enregistrer