Imparare a mostrare il codice in WordPress è fondamentale per i blogger e i creatori di contenuti che pubblicano costantemente codice online per i propri lettori. Il codice informatico, per sua stessa natura, mostra qualcosa di nuovo sul frontend di un sito web piuttosto che i tag, gli slash e le parentesi che si trovano all’interno degli snippet di codice.
Questo, tuttavia, rappresenta un problema per chi scrive di sviluppo e design, in quanto è necessario disporre di un modo per mostrare correttamente il codice senza che svolga il suo vero lavoro, come la creazione di un pulsante o l’aggiunta di uno stile a un blocco di paragrafi.
In poche parole, se scrivete un post sul blog e inserite un esempio di snippet di codice, dovrete evitare che il codice funzioni davvero! In questo modo, i lettori potranno vedere il codice nella sua forma grezza, visualizzarlo in un blocco ben formattato e persino copiarne il contenuto per utilizzarlo nel loro lavoro di sviluppo.
In questa guida vi mostreremo esattamente come mostrare il codice in WordPress (indipendentemente dal tema WordPress) utilizzando diversi metodi e vi aiuteremo a decidere quale metodo è più adatto al vostro flusso di lavoro.
Cosa succede quando si aggiunge un codice regolare in WordPress?
Potreste chiedervi cosa succederebbe se scriveste del codice nell’editor visuale di WordPress. Dopotutto, dato che non state utilizzando gli editor di testo o di codice, il vostro snippet di codice non dovrebbe andare bene così?
Probabilmente no.
Ecco alcuni dei risultati insoliti che possono verificarsi:
- Il codice appare parzialmente, con parti di codice che vengono visualizzati nel frontend del post e altre che scompaiono. I visitatori avranno un’impressione poco professionale; ciò significa che il vostro codice non è accurato.
- Non compare affatto: il codice scompare completamente nel backend e non compare nel frontend del post.
- Si nota una formattazione strana, spesso non facile da usare o da pubblicare per il pubblico.
- Il codice può essere visualizzato solo parzialmente
Per illustrare un paio di questi risultati, utilizzeremo il seguente frammento di codice HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>Questo particolare snippet di codice utilizza elementi di stile HTML per produrre tre blocchi di contenuto verdi con intestazioni e paragrafi.
Tuttavia, vorremmo visualizzare il codice grezzo in un post del blog, senza che venga effettivamente visualizzato in questi blocchi.
Ecco i risultati se incolliamo il codice direttamente nell’editor dei blocchi Gutenberg in WordPress:
Come vedete, WordPress cerca di utilizzare il codice per il suo scopo principale: generare contenuti – tuttavia priva il codice del suo stile, quindi non fornisce il risultato che volevamo mostrare ai lettori.
Per evitare situazioni come questa, vi invitiamo a utilizzare uno dei metodi di visualizzazione del codice elencati di seguito.
Come mostrare il codice sul sito WordPress (6 metodi)
Questi metodi sono elencati dal più facile al più difficile, e abbiamo alcuni metodi speciali per coloro che amano scrivere codice e contenuti in editor markdown (al contrario di WordPress).
Metodo 1: Utilizzare l’editor dei blocchi Gutenberg (predefinito)
Per esercitarvi a mostrare il codice in WordPress, potete utilizzare il seguente snippet di codice, che utilizza l’HTML e il CSS interno per produrre un semplice risultato con un’intestazione blu e un paragrafo nero:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>Quando viene messo in funzione, il codice mostra questo nel frontend:
Ma seguendo questo tutorial imparerete a mostrare il codice grezzo, non quello che il codice dovrebbe mostrare sul frontend.
Passo 1: Aggiungere un blocco di codice in WordPress
L’editor di WordPress Gutenberg dispone già di un blocco Codice integrato, che vi permette di visualizzare frammenti di codice senza perdere la formattazione o attivare effettivamente il codice.
Per iniziare, aprite un post o una pagina di WordPress e cliccate su uno dei pulsanti Aggiungi blocco.
Fate clic su uno dei pulsanti Aggiungi blocco
In questo modo viene visualizzata la raccolta di blocchi disponibili. Potete cercare il blocco Codice o digitare una parola chiave come “codice” nella barra di ricerca.
Una volta trovato il blocco Codice (con le icone delle parentesi), cliccateci sopra per inserire un pezzo di codice nel post.
Ora dovreste vedere un campo con il suggerimento “Scrivi codice…”.
L’editor di WordPress Gutenberg supporta il markdown, quindi potete anche trovare e inserire il blocco Codice digitando uno slash (/) nell’editor, quindi iniziare a scrivere “C” o “Codice”. WordPress mostrerà tutti i blocchi pertinenti, offrendovi un modo più veloce per inserirli.
È facile confondere il blocco Codice e il blocco HTML personalizzato. Tuttavia, il blocco HTML personalizzato serve per aggiungere HTML personalizzato da rendere sul frontend, non per aggiungere codice grezzo da visualizzare.
Passo 2: Incollare il codice di visualizzazione nel campo del blocco Codice
Ora è il momento di copiare il codice che desiderate mostrare e incollarlo nel campo “Scrivi codice…”.
Il codice appare ora all’interno del riquadro.
Il bello del blocco Codice è che rispetta tutti gli spazi e le tabulazioni già presenti all’interno del frammento di codice. Di conseguenza, non dovrebbe avere un aspetto diverso da quello della fonte da cui l’avete copiato.
Passo 3: Pubblicare e visualizzare i risultati
Per visualizzare il codice sul post o pagina di WordPress, terminate il processo cliccando sul pulsante Pubblica.
Potete anche farvi un’idea dell’aspetto del codice prima di pubblicarlo selezionando Anteprima.
Dopo aver premuto il pulsante Pubblica, visitate la versione live del post per verificare che il pezzo di codice venga visualizzato come codice grezzo.
Come vedete, il blocco Codice è piuttosto semplice, ma fornisce le funzionalità necessarie per mantenere la formattazione durante la pubblicazione del codice nei post del blog.
Date un’occhiata alla schermata seguente. Nel nostro esempio, non è cambiato nulla rispetto al frammento di codice originale; è stato semplicemente presentato nel frontend in un riquadro grigio.
Passo 4: Considerare la formattazione del blocco di codice
Per far risaltare un po’ il blocco Codice, potreste provare a modificarne l’aspetto rispetto a quello predefinito.
Per scoprire le opzioni di stile del blocco, selezionate il blocco Codice, quindi scegliete il pulsante Impostazioni (icona dell’ingranaggio). In questo modo si apre la scheda Blocco, che mostra solo le impostazioni del blocco selezionato, in questo caso il blocco Codice.
È possibile modificare lo stile del blocco Codice come si vuole, con opzioni per modificare i colori del testo e dello sfondo.
Potete anche:
- Modificare le dimensioni del testo
- Aggiungere padding e margini alla casella di codice
- Includere un bordo con una larghezza e un colore personalizzati
Come sempre, cliccate sul pulsante Pubblica quando avrete finito di modificare il blocco, quindi visualizzate i risultati nel frontend del vostro post WordPress.
Metodo 2: Utilizzare un plugin
Un altro modo per visualizzare il codice su WordPress è quello di installare un plugin.
Questo metodo può sembrare un po’ superfluo visto che WordPress ha già un blocco codice integrato, ma alcuni plugin offrono funzionalità aggiuntive e strumenti di formattazione che ne rendono utile l’utilizzo. In breve, potete rendere i vostri blocchi di codice più belli di quelli che otterreste con il blocco Codice standard di Gutenberg.
Inoltre, alcuni utenti dell’editor classico di WordPress potrebbero trovare più semplice lavorare con un plugin, poiché è un po’ più difficile visualizzare il codice nell’editor classico.
Per iniziare, dovete scegliere un plugin “evidenziatore di sintassi”, che è un modo elegante per dire che il plugin evidenzierà il codice sorgente e ne manterrà intatta la formattazione.
Ecco alcuni plugin affidabili per visualizzare il codice su WordPress:
In questo tutorial utilizzeremo il plugin Enlighter perché offre opzioni per etichettare i tipi di codice da visualizzare nelle caselle di codice, oltre a molte altre funzioni di stile. Se preferite, potete provare gli altri, in quanto fanno tutti la stessa cosa.
Passo 1: Installare un plugin per l’evidenziazione della sintassi
Installate il plugin Enlighter – Customizable Syntax Highlighte sul vostro sito WordPress utilizzando il metodo di installazione dei plugin che preferite.
Dopo l’attivazione, il plugin è pronto per inserire il codice in qualsiasi post/pagina con un blocco Gutenberg o un pulsante Inserisci dell’editor classico.
Passo 2: Inserire il blocco Enlighter Sourcecode in un post
Se state utilizzando l’editor di blocchi di WordPress Gutenberg, aprite un post in cui desiderate visualizzare il codice. Cliccate su uno dei pulsanti Aggiungi blocco (icona +) per visualizzare la raccolta di blocchi disponibili.
Sfogliate o digitate una parola chiave per il blocco Enlighten Sourcecode. Cliccate sul blocco per inserirlo nel post.
Passo 3: Incollare il codice nel blocco Syntax Highlighter
Il blocco Enlighter Highlighter viene visualizzato nell’Editor blocchi, con un titolo “Generic Highlighting” e un campo “Insert Sourcecode…”.
Prendete il codice che desiderate mostrare su WordPress e incollatelo o digitatelo nel campo “Insert Sourcecode…”.
Come evidenziatore di sintassi, il plugin conserva tutte le scelte di formattazione e le schede. Quando sarete soddisfatti del risultato, cliccate sul pulsante Pubblica.
Passo 4: Anteprima del codice nel frontend
A questo punto potete visualizzare il frontend del vostro post per vedere cosa vedono i visitatori del sito.
Il plugin Enlighter offre un tema di default minimalista per la visualizzazione del codice, con numeri di riga per aiutare l’organizzazione e i riferimenti.
Come abbiamo detto, l’utilizzo di un plugin per visualizzare il codice su WordPress ha i suoi vantaggi rispetto agli altri metodi. Ad esempio, la versione frontend del plugin per la sintassi Enlighter evidenzia le righe quando l’utente scorre il codice.
Ci sono anche diversi pulsanti nell’angolo superiore destro del riquadro del codice, tra cui uno che presenta il codice in testo semplice, senza i numeri di riga.
Il secondo pulsante si chiama Copy To Clipboard e copia istantaneamente tutto ciò che si trova all’interno del riquadro del codice negli appunti dell’utente, che può prenderlo e incollarlo in qualsiasi programma.
Infine, il terzo pulsante apre il codice in una nuova finestra, presentandolo in una versione di testo semplice della finestra del browser.
Passo 5: Impostazione della lingua e delle linee per la casella del codice
Il plugin Enlighter è dotato di vari temi e di potenti strumenti di personalizzazione che permettono di dare alla casella del codice l’aspetto che desiderate. Se preferite non utilizzare il tema predefinito, tornate al post su WordPress e cliccate sul blocco Enlighter Sourcecode attualmente aperto.
In questo modo verrà visualizzata la barra laterale del blocco in WordPress. Se non appare, assicuratevi di cliccare sul pulsante Impostazioni (icona a forma di ingranaggio) nell’angolo in alto a destra della finestra di WordPress.
La prima impostazione da personalizzare è il campo Language: questo indica al plugin il linguaggio del codice da visualizzare in modo che possa offrire la formattazione e l’evidenziazione corretta.
Ci sono diversi linguaggi di codifica tra cui scegliere, quindi scorrete l’elenco e scegliete quello più appropriato.
Il campo Speciallines evidenzia le righe che specificherete. Per farlo, digitate i numeri delle righe separati da virgole.
Di conseguenza, i visitatori del sito vedranno evidenziate tutte le righe che avrete specificato.
Il campo Lineoffset è un modo per far iniziare il vostro snippet di codice da una riga numerata specifica, il che è utile se state mostrando solo un sottoinsieme di codice che fa parte di una raccolta più ampia di righe.
Come vedete, digitando 10 nel campo Lineoffset, l’intero riquadro di codice inizia al numero 10.
Passo 6: Scegliere un tema
Il tema Enlighter è il tema predefinito di questo plugin. Tuttavia, il campo Theme (sempre sotto il pannello delle impostazioni del blocco) presenta un’ampia gamma di temi integrati da scegliere.
Ad esempio, il tema Godzilla mostra il codice come se fosse su un foglio di carta millimetrata o da disegno.
Il tema Atomic, invece, cambia lo sfondo in un tema scuro e offre un testo prevalentemente bianco e una colorazione rosa per i tag del codice.
Un altro esempio è il tema Classic, che è una versione meno minimalista del tema Enlighter con colori più vivaci e linee più definite.
Passo 7: Considerare la possibilità di creare un tema personalizzato
Il plugin Enlighter offre una scheda all’interno della bacheca di WordPress per personalizzare ogni aspetto del plugin e delle sue funzioni di evidenziazione.
Per avere il pieno controllo sul design e sulla visualizzazione delle caselle di codice, andate alla scheda Enlighter (icona <>), quindi scegliete Appearance o Theme Customizer.
La scheda Appearance vi permette di scegliere un tema standard e di regolare elementi quali:
- Indentazione del codice
- Sovrapposizione del testo
- Numerazione
- Effetto line-hover
- Codice RAW su doppio clic
La sezione Theme Customizer include un lungo elenco di schede per creare un tema per l’evidenziatore di codice da zero, con opzioni per regolare pulsanti, espressioni, linguaggi e altro ancora.
Bonus: usare Enlighter con l’editor classico
Il plugin Enlighter funziona in modo leggermente diverso per chi utilizza ancora l’editor classico di WordPress.
Una volta installato il plugin Enlighter, andate su qualsiasi post o pagina e cercate il pulsante Enlighter Code Insert nel pannello di controllo dell’editor.
Si apre una nuova finestra chiamata Enlighter Code Insert.
Incollate il codice che volete visualizzare nel campo grande (senza etichetta) in basso.
Cliccate sul menu a tendina del campo Language per selezionare il linguaggio di codifica corretto.
Una volta terminato, cliccate sul pulsante OK. È anche possibile modificare le altre caratteristiche di questa finestra, come ad esempio aggiungere l’indentazione delle righe.
Cliccate sul pulsante Pubblica per il post e visualizzate i risultati sul frontend. Il riquadro del codice predefinito per l’Editor classico è un tema scuro, ma potete modificare l’aspetto del riquadro del codice e persino creare dei temi personalizzati.
Metodo 3: Utilizzare uno strumento di codifica
Gli strumenti di codifica rappresentano un’opzione alternativa quando si cerca di mostrare il codice in WordPress, soprattutto se non si ha intenzione di farlo spesso (e si preferisce evitare di utilizzare un plugin).
Gli encoder HTML preservano l’integrità dei formati di codice, in particolare quelli con caratteri speciali e tabulazioni. Gli encoder sono in grado di gestire tutti i tipi di codice, ma poi traducono il codice inserito in un codice pronto per l’HTML, facile da incollare in WordPress.
Non esistono strumenti di codifica affidabili come plugin, ma molti sono offerti come applicazioni web gratuite di terze parti. Tenete presente che gli strumenti di codifica non offrono alcuno strumento di styling, quindi riceverete solo il codice così come deve essere visualizzato (niente box fantasiosi o funzioni di personalizzazione delle righe).
Alcuni strumenti di codifica affidabili sono:
In base ai nostri test, lo strumento di codifica più efficace è W3Docs HTML Encoder, quindi lo utilizzeremo per questo tutorial.
Passo 1: Aprire l’encoder e scegliere le impostazioni
Andate sul sito web di W3Docs HTML Encoder.
La pagina mostra due campi affiancati. Quello a sinistra è il campo in cui incollare il codice. Quello a destra mostra la versione codificata da copiare e incollare in WordPress.
Tuttavia, dovete prima stabilire quale tipo di codice volete conservare:
- Scegliete l’unicode JavaScript se incollate codice con elementi JavaScript.
- Scegliete i simboli HTML se usate l’HTML.
Passo 2: Incollare e cliccare per codificare
Incollate il codice che volete visualizzare in WordPress nel campo a sinistra. Poi cercate e cliccate sul pulsante Encode in alto a destra.
Passo 3: Copiare il risultato decodificato
Il prodotto finito può sembrare confuso, ma in realtà è una combinazione di elementi HTML che preservano ogni aspetto del codice che avete inserito, senza che il codice si attivi e mostri qualcos’altro sul frontend.
Cliccate sul pulsante Copy.
Passo 4: Incollare l’HTML codificato nell’editor di codice o di testo di WordPress
Tornate a WordPress e aprite il post o la pagina desiderata.
Selezionate la voce di menu Opzioni (tre punti verticali) nell’angolo in alto a destra. Cliccate sull’opzione Editor di codice.
Ora vedrete l’Editor di codice anziché l’Editor del blocco visivo. Cercate l’area in cui desiderate visualizzare il codice e incollate l’HTML codificato nell’editor.
Se state utilizzando l’editor classico di WordPress, dovete andare nella scheda Testo, che è la stessa dell’editor del codice dell’editor dei blocchi di Gutenberg.
Passo 5: Pubblicare e visualizzare il codice
Fate clic su Aggiorna o Pubblica per il post, quindi navigate nel frontend del post per visualizzarne l’aspetto.
Dovreste vedere il codice originale che è stato incollato nel codificatore, prima che lo strumento aggiungesse gli elementi di codifica HTML. Come già detto, non ci sono funzioni di stile con i codificatori, quindi questo è un ottimo metodo per ottenere un aspetto pulito e minimalista.
Metodo 4: Utilizzare uno shortcode personalizzato
La creazione di uno shortcode personalizzato consente di inserire pezzi di codice riutilizzabili senza dover fare copia e incolla. Ecco perché gli shortcode personalizzati offrono una solida opportunità per visualizzare il codice su WordPress.
Ecco i vantaggi dell’utilizzo di shortcode personalizzati per visualizzare il codice:
- Gli shortcode personalizzati permettono di salvare il codice complicato una volta e poi di riutilizzarlo, eliminando la necessità di digitare ogni volta frammenti di codice più lunghi.
- Potete scrivere il vostro stile CSS per gli evidenziatori di codice e le caselle.
- Gli shortcode possono essere utilizzati da chiunque, quindi altri collaboratori possono sfruttare i vostri evidenziatori di codice e i vostri blocchi con un semplice clic.
La creazione di uno shortcode personalizzato richiede esperienza nella modifica dei file dei temi di WordPress, nel lavoro con il codice PHP e, potenzialmente, nella creazione di plugin WordPress. A causa di questi requisiti, creare uno shortcode personalizzato per WordPress può essere difficile per chi è alle prime armi con il PHP.
Tuttavia, il risultato finale è un modo molto più semplice di visualizzare il codice su WordPress.
Potete chiamare lo shortcode personalizzato come volete e creare più opzioni, come [html] [/html] e [css] [/css], per diversi linguaggi di codifica.
Tenete presente che gli shortcode personalizzati funzionano meglio per l’evidenziazione della sintassi quando si usa l’Editor di testo (in WordPress classico) o il box HTML personalizzato quando si lavora con l’Editor dei blocchi di WordPress Gutenberg.
L’obiettivo è quello di creare uno shortcode personalizzato in cui poter digitare o incollare il codice tra i tag di apertura e chiusura dello shortcode.
Una volta pubblicato, le impostazioni di stile e di evidenziazione dello shortcode personalizzato vengono visualizzate nel frontend. Inoltre, il codice che avete aggiunto viene visualizzato correttamente nell’evidenziatore di sintassi.
Metodo 5: Utilizzare i tag di
Forse il metodo più vecchio, ma ancora incredibilmente affidabile, per visualizzare il codice su WordPress è quello di aggiungere semplicemente dei tag HTML specifici intorno al frammento di codice. Questo metodo è più indicato quando si lavora con l’editor classico di WordPress o con qualsiasi altro editor HTML.
Ci sono due opzioni:
<code>tag: Ideale per visualizzare una breve riga di codice; spesso utilizzato all’interno di paragrafi<pre>tag: Ideale per blocchi di codice più lunghi o quando si desidera avere più opzioni di formattazione
Opzione 1: Usare i tag <code> per gli snippet di codice in linea
I creatori di contenuti che scrivono di codice non sempre vogliono utilizzare blocchi di codice di grandi dimensioni. A volte è più sensato includere un breve frammento di codice all’interno di un paragrafo.
Tuttavia, è necessario evidenziare e preservare la formattazione del codice. Inoltre, alcuni codici possono causare problemi al contenuto circostante se non vengono conservati correttamente.
Prendiamo ad esempio il tag <br>: senza il tag <code> aggiungerebbe semplicemente un’interruzione al paragrafo.
Inserendo la codifica all’interno di questi tag si ottiene un risultato molto più pulito:
<code> </code>Per farlo, aprite un post di WordPress e attivate l’editor di codice (per l’editor dei blocchi di Gutenberg) o l’editor di testo (se usate WordPress classico).
Incollate o scrivete questi tag da qualche parte nell’editor; non inserite ancora il codice che volete visualizzare. Aggiungete invece uno spazio tra i tag.
<code> </code>
Passate all’editor visuale (indipendentemente dal fatto che siate in Gutenberg o in WordPress classico).
Vedrete un piccolo spazio grigio all’interno del contenuto visivo. Fate clic per posizionare il cursore all’interno di questo spazio grigio. È qui che potete incollare o digitare il codice da visualizzare.
Man mano che scrivete, lo spazio grigio si espanderà per accogliere lo snippet di codice. Cliccate sul pulsante Pubblica o Aggiorna per quel post.
Nel frontend del post, ora vedrete il codice salvato come dovrebbe essere e senza alcuna anomalia (come l’aggiunta di un’interruzione al contenuto).
La formattazione di questi tag di <code> è solitamente scarna, ma spesso dipende dallo stile del tema. Ad esempio, il nostro esempio cambia solo il carattere ma non include uno sfondo grigio.
Opzione 2: Usare i tag <pre> per i blocchi di codice più lunghi
I frammenti di codice più lunghi meritano un blocco a sé stante, separato dal contenuto che state scrivendo in paragrafi. Per questi ultimi, vi consigliamo di utilizzare i tag <pre>.
Il processo di aggiunta di un tag <pre> è identico a quello dei tag <code>, ma avrete più spazio a disposizione per inserire il codice.
Andate su un post e aprite l’editor Codice (Gutenberg) o Testo (WordPress classico). Incollate o scrivete il codice che desiderate visualizzare. Poi, circondate il codice con questi tag:
<pre> </pre>
Passate all’editor visuale per vedere come si presenta. Noterete che la sezione di testo avrà un’etichetta “Preformatted”, che è proprio lo scopo del tag <pre>.
Cliccate su Pubblica o Aggiorna, quindi passate al frontend per vedere il codice nella sua forma originale. Come i tag <code>, anche i tag <pre> sono pessimi per quanto riguarda la formattazione, quindi l’aspetto sarà il più semplice possibile. Tuttavia, esistono dei modi per personalizzarne lo stile.
Suggerimenti per lo stile dei tag <pre>
I tag <pre> sono meno stabili dei tag <code>, quindi potreste incontrare delle difficoltà a seconda del tipo di codice che state cercando di mostrare.
Utilizzate questi suggerimenti per migliorarne l’aspetto:
- Cercate di eliminare o evitare completamente le interruzioni di riga, poiché il tag
<pre>spesso non le riconosce. In generale, non reagisce bene a un numero eccessivo di interruzioni di riga. - Considerate l’aggiunta di una proprietà
overflow-x:auto;nel vostro CSS per aggiungere la funzionalità di scorrimento al codice del tag<pre>. Questo è utile in caso di contenuti sovrabbondanti, dato che il tag<pre>da solo permette al codice di uscire dalla pagina. - Scegliete i font monospaziati.
Potete anche personalizzare lo stile della formattazione del testo e il riquadro dietro il codice. Ecco un modello iniziale che potete aggiungere al vostro file CSS:
article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}Metodo 6: Utilizzare un editor Markdown collegato a WordPress
Gli editor Markdown offrono la possibilità non solo di digitare e formattare più velocemente, ma molti di essi si collegano direttamente a WordPress per una pubblicazione immediata direttamente dall’editor.
Molti scrittori si rivolgono agli editor markdown per questo rapido processo di creazione dei contenuti. E fortunatamente, alcuni di questi editor offrono il markdown per i blocchi di codice, il che significa che potete visualizzare il codice all’interno dell’editor markdown e poi inviarlo direttamente a WordPress per la pubblicazione.
Tenete presente che i normali editor di testo (come Sublime Text) non preservano l’integrità del codice quando viene trasferito per la pubblicazione su WordPress. Inoltre, gli editor HTML, pur essendo eccellenti per scrivere e memorizzare il codice, non forniscono le funzioni di evidenziazione necessarie per preservare il codice per la pubblicazione su WordPress.
Ci sono molti editor markdown tra cui scegliere, ma le soluzioni ideali condividono due caratteristiche:
- Esportazione diretta su WordPress
- Markdown per l’evidenziazione del codice
Potete comunque optare per un editor markdown con esportazione in HTML, se non vi piace l’esportazione diretta su WordPress.
I migliori editor markdown con entrambe le funzioni sono:
Ulysses e ByWord sono applicazioni premium, mentre Obsidian ha sia la versione gratuita che quella premium.
Per il seguente tutorial utilizzeremo Ulysses.
Passo 1: Aggiungere un blocco di codice longform in Ulysses
Durante la stesura di un documento in Ulysses, digitate " markdown – cioè due apostrofi – ogni volta che volete aggiungere immediatamente un blocco di evidenziazione del codice all’interno del documento.
Questo metodo di markdown è per blocchi di codice più lunghi. Non è utilizzabile nel mezzo di un paragrafo, quindi dovete creare una nuova riga per attivare il markdown.
Una volta visualizzato l’evidenziatore di codice, potete digitare o incollare qualsiasi cosa vogliate.
Un altro modo per attivare il blocco codice è quello di cliccare sulla voce di menu Markdown (tre punti orizzontali) e selezionare l’opzione Codice.
Dopo aver cliccato su questa voce di menu, il campo di evidenziazione del codice appare nel punto in cui si trovava l’ultimo cursore.
Per inserire gli snippet di codice all’interno dei paragrafi, dovete ricorrere al markdown di `` (che ha quasi lo stesso aspetto, ma in realtà sono due accenti acuti/gravi al posto degli apostrofi).
Passo 3: Esportazione in WordPress
Una volta pronto il documento, è il momento di esportare tutto su WordPress.
La cosa più bella degli editor markdown che si collegano a WordPress è che mantengono i blocchi di codice durante il trasferimento. In questo modo, vedrete evidenziati i codici ben formattati e pronti per essere pubblicati su WordPress.
In Ulysses, andate nella parte superiore del documento per trovare la barra degli strumenti. Cliccate sul pulsante Publishing Preview.
Si apre un menu a tendina per selezionare la piattaforma e il sito web su cui pubblicare. Potete anche usare l’opzione Manage Accounts in quel menu per accedere a un sito WordPress prima di esportare.
Una volta scelto il sito web giusto, cliccate sul pulsante Publish.
Inserite il titolo del post, l’orario e tutte le altre informazioni che desiderate, come le categorie, i tag e le immagini in evidenza.
La parte più importante, tuttavia, è impostare lo stato su Draft per non pubblicare il post senza averlo prima revisionato su WordPress.
Cliccate su OK per procedere.
In pochi secondi, Ulysses inserisce l’intero documento in un nuovo post di WordPress (potrebbe essere necessario accedere all’amministrazione di WordPress quando appare).
Vedrete i blocchi di codice già configurati e pronti per essere pubblicati. Cliccate sul pulsante Pubblica per renderlo attivo.
Nel frontend, vedrete che i frammenti di codice in riga e i blocchi di codice più grandi sono ben evidenziati e la formattazione del codice è stata conservata.
Riepilogo
Esistono diversi metodi per visualizzare correttamente il codice su WordPress e spesso dipende dall’editor WordPress utilizzato, dal linguaggio di codice che si desidera mostrare e dal modo in cui si desidera visualizzare e formattare il codice. Ad esempio, la scelta di un plugin offre sicuramente un’esperienza di formattazione più creativa rispetto al blocco Codice standard dell’editor WordPress Gutenberg.
In questo articolo abbiamo illustrato diversi metodi per visualizzare il codice in WordPress.
In genere consigliamo di iniziare con il metodo 1 e di procedere per gradi. Il metodo 2 è utile se cercate altre opzioni di stile, mentre i metodi 3-5 sono utili solo in situazioni particolari. Il metodo 6 è una sorta di soluzione bonus, pensata per coloro che preferiscono gli editor markdown alla scrittura diretta in WordPress.
Indipendentemente dal metodo scelto, un provider di hosting affidabile può aiutarvi a migliorare ulteriormente il vostro sito. Le soluzioni di Hosting WordPress di Kinsta offrono piani per siti di ogni forma e dimensione e la piattaforma facile da usare – MyKinsta, una dashboard di amministrazione proprietaria – rende la modifica di qualsiasi parte del vostro sito e dei suoi file un gioco da ragazzi. Inoltre, otterrete ulteriori vantaggi come velocità, sicurezza e supporto di livello mondiale di Kinsta.
Avete provato a visualizzare il codice in WordPress in passato? Se sì, quale metodo ha funzionato meglio per voi? Fatecelo sapere nella sezione commenti qui sotto.
Lascia un commento