Wordpress: aggiungere jQuery alla sintassi di SyntaxHighlighter

SyntaxHighlighter è un plugin di Wordpress molto usato da noi sviluppatori. Ci consente infatti di avere l'evidenziazione della sintassi del nostro codice. Ovviamente questo plugin supporta JavaScript ma non jQuery. Tuttavia, c'è un modo per far si che SyntaxHighlighter riconosca le parole chiave di jQuery ed è molto semplice. Vediamolo insieme.

Come funziona SyntaxHighlighter

SyntaxHighlighter usa dei file JavaScript chiamati brushes per evidenziare la sintassi di un linguaggio. Quando noi usiamo uno shortcode o aggiungiamo una classe CSS legata ad un linguaggio, questo plugin carica il file JavaScript usato per la sintassi del linguaggio specificato.

I file JavaScript si trovano nella directory /scripts all'interno di ciascuna directory syntaxhighlighter terminante con il numero di versione (attualmente sono in uso la 2 e la 3) che a loro volta sono situate direttamente nella directory del plugin (/wp-content/plugins/syntaxhighlighter).

A noi interessa solo il file shBrushJScript.js.

Modificare il file shBrushJScript

All'interno di questo file dobbiamo identificare la variabile che contiene la lista delle parole chiave. Nel nostro caso si presenta così:


var keywords =	'break case catch continue ' +
						'default delete do else false  ' +
						'for function if in instanceof ' +
						'new null return super switch ' +
						'this throw true try typeof var while with'
						;

Si tratta di un'unica stringa formata da sottostringhe al cui interno si trovano le parole chiave separate da spazi. Quindi dobbiamo aggiungere le parole chiave di jQuery subito dopo l'ultima stringa. Ecco come:

+'fn fx addClass andSelf bind sub when noConflict extend '
+ 'context each get index length selector size toArray queue data removeData dequeue '
+ 'attr removeAttr hasClass removeClass toggleClass html text css val scrollLeft offset position scrollTop '
+ 'height width innerHeight innerWidth outerHeight outerWidth eq filter is map not slice children closest find next prev nextUntil nextAll prevUntil prevAll '
+ 'offsetParent parent parents parentsUntil siblings add contents end append appendTo prepend prependTo after before insertAfter insertBefore '
+ 'unwrap wrap wrapAll wrapInner replaceWith replaceAll detach empty remove clone load ready unload delegate live die one trigger triggerHandler unbind undelegate ' 
+ 'click dblclick focus focusin focusout hover mouseover mouseout mouseenter mouseleave mousemove mouseup mousedown blur change select submit keydown keypress keyup '
+ 'currentTarget isDefaultPrevented isImmediatePropagationStopped pageX pageY preventDefault relatedTarget result stopImmediatePropagation target timeStamp type which '
+ 'error resize scroll hide show slideDown slideUp slideToggle fadeIn fadeOut fadeTo animate delay stop off ajax ajaxSetup getJSON getScript post ajaxComplete ajaxStart ajaxStop ajaxSend ajaxError ajaxSuccess serialize serializeArray browser contains hasData globalEval grep inArray isArray isEmptyObject isFunction isPlainObject isXMLDoc makeArray map merge noop parseJSON proxy support trim parseXML unique';

Usiamo anche noi l'operatore + per concatenare le nostre stringe aggiungendole subito dopo l'ultima stringa dell'originale. Il risultato è il seguente:


$('#test', 'body').find(':header').
each(function() {

  if($(this).hasClass('title')) {
  
    $(this).bind('click', function() {
    
      $(this).animate({
        height: 'toggle'
      }, 'slow');
    
    });
  
  }


});
Torna su