Mostrare codice di programmazione su WordPress come su un editor

Uno dei primi problemi che mi sono posto quando ho iniziato a mettere i miei appunti online è stato quello di poter inserire negli articoli degli snippet di codice con una formattazione decente che ne consentisse al volo la comprensione.

In html esiste un tag, spessissimo usato in php per fare il print degli array in un modo più leggibile: <pre>. Se a questo tag viene aggiunto, come fa WP in fase di pubblicazione, uno stile dedicato, il risultato può essere soddisfacente. Ecco come utilizzarlo

La gif è in inglese, quindi voi non dovrete cercare “code”, ma la versione italiana “codice”, se avete wp installato nella vostra lingua madre e il risultato che otterrete sarà questo:

<?php
private funzione get_time_tags() {
    $time = get_the_time('d M, Y');
    return $time;
}
?>

Ovviamente il tema utilizzato per la parte pubblica del vostro sito può influenzare nello stile la visualizzazione del blocco di codice. Questo è quindi un modo veloce per mostrare del codice ma, diciamocelo, si può fare di meglio. Quello che infatti manca totalmente è l’evidenziazione della sintassi, che rende il codice leggibile in modo più scorrevole: una caratteristica importante quando si sta leggendo un articolo.

Quando il sito non era realizzato in WordPress ho utilizzato una classe javascript che risolveva al meglio la problematica ed ho scoperto che esiste un plugin per wordpress che la utilizza: SyntaxHighlighter Evolved

Una volta installato il plugin vi fornirà nell’editor Gutenberg una nuova tipologia di blocco: ecco come utlizzarlo.

Selezionando il blocco appena inserito apparirà sulla colonna destra il pannello per selezionare il tipo di linguaggio inserito, da cui dipenderà l’evidenziazione della sintassi che otterremo.

Ed ecco come viene mostrato il codice che avevamo inserito prima utilizzando il nuovo blocco di codice.

<?php
private funzione get_time_tags() {
    $time = get_the_time('d M, Y');
    return $time;
}
?>

È possibile inserire il frammento di codice anche usando gli shortcode offerti dal plugin inseriti in un blocco di “html puro” per personalizzare ulteriormente la visualizzazione. Per maggiori dettagli vedi la pagina dei setting del plugin che spiega tutto.

P.s. Le gif animate che trovate in questo articolo le ho rubate per pigrizia da questo articolo in inglese: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/