WordPress: evidenziatori di sintassi: problemi, caratteristiche e soluzioni anche senza plugin

Recentemente ho ricevuto dei messaggi su Twitter da parte di amici e follower in difficoltà con gli evidenziatori di sintassi per WordPress. Nello specifico i plugin usati per lo scopo o non funzionavano o rallentavano eccessivamente il sito. In questo articolo vorrei fare chiarezza su questi plugin una volta per tutte e mostrarvi come installare un evidenziatore di sintassi senza usare plugin.

PHP o JavaScript?

Gli evidenziatori di sintassi si dividono in due categorie: quelli che usano PHP per evidenziare i vari linguaggi e quelli che si appoggiano a librerie JavaScript per lo stesso scopo. Alla prima categoria appartiene WP-Syntax, mentre alla seconda le varie varianti di SyntaxHighlighter.

Che differenze ci sono?

  1. PHP è molto più veloce di JavaScript nel parsing e nell'evidenziazione della sintassi.
  2. PHP modifica l'output HTML dei blocchi di codice, mentre JavaScript solo la struttura del DOM.

A livello di performance la soluzione migliore è certamente PHP, ma in alcuni casi bisogna stare bene attenti a come il plugin assegni gli stili CSS alla sintassi dei linguaggi. WP-Syntax, ad esempio, ha una procedura piuttosto complicata per modificare gli stili di base della sintassi in uso, laddove un plugin JavaScript si basa invece su temi diversi contenuti in altrettanti file CSS.

Un altro aspetto da tenere presente è la formattazione dei blocchi di codice. Alcuni plugin utilizzano l'elemento pre, altri uno shortcode. Per esperienza personale vi posso dire che la prima soluzione è da preferire, in quanto se disinstallate il plugin gli shortcode vengono visualizzati come normali stringhe di testo perchè viene a mancare la funzione che registrava lo shortcode in WordPress.

Ancora: dovreste controllare se il plugin vi permette di caricare i file JavaScript quando ce n'è effettivamente bisogno e non su tutte le pagine del sito. Non tutti questi plugin lo fanno, e questo può avere un impatto negativo sulla performance e il caricamento delle pagine.

Installare un evidenziatore di sintassi senza plugin

Useremo Highlight JS come esempio, perchè è una libreria JavaScript semplice da usare e con un impatto limitato sulla performance.

Dopo aver scaricato la libreria e averla uploadata sul nostro server dobbiamo:

  1. Inserire il foglio di stile del tema scelto.
  2. Inserire il file JavaScript della libreria.
  3. Inserire il codice JavaScript per lanciare la libreria.
  4. Inserire il tutto solo nei post singoli.

Nel nostro file functions.php avremo:

[php htmlscript="true"] <?php function add_highlighter() { if(is_single()) { ?> <link rel="stylesheet" href="<?php echo get_bloginfo('template_url') . '/js/highlight/styles/googlecode.css';?>" media="screen" /> <script type="text/javascript" src="<?php echo get_bloginfo('template_url') . '/js/highlight/highlight.pack.js';?>"></script> <script> (function() { hljs.tabReplace = ' '; hljs.initHighlightingOnLoad(); })(); </script> <?php } } add_action('wp_head', 'add_highlighter'); ?>

Tutto qui. Il prossimo passo è quello di usare nei nostri post la seguente struttura HTML:


<pre>
<code>
<!-- codice qui -->
</code>
</pre>

Possiamo anche specificare il linguaggio usato con classi CSS (quindi superando la validazione):


<pre class="php">
<code>
<!-- codice qui -->
</code>
</pre>

Con questa soluzione (semplicissima) il nostro sito ha sicuramente guadagnato una funzionalità in più ma senza compromettere la sua stabilità e performance.

Torna su