Share
L'evidenziazione della sintassi è diventata piuttosto standard nella maggior parte dei siti tutorial (come puoi vedere di seguito) e ci sono molte opzioni disponibili, il tutto a seconda delle lingue che utilizzi e del modo in cui desideri visualizzare i frammenti di codice.
Per molto tempo ho utilizzato Google Prettify poiché era facile da configurare. L'unico vero problema che ho avuto è stato che non ha catturato tutti gli elementi appropriati all'interno del mio codice e li evidenzia di conseguenza. Ho provato a rielaborarlo, ma non era il codice più semplice da navigare.
Fortunatamente di recente mi sono imbattuto in un nuovo evidenziatore di sintassi leggero di Lea Verou chiamato Prism.js che offre la possibilità di espandere la base dell'evidenziazione di markup HTML e CSS con alcuni semplici hook di plugin.
Ho preso il suo codice JavaScript principale e ho aggiunto l'opzione per includere la numerazione delle righe e l'evidenziazione PHP. Ho anche modificato alcuni dei suoi pattern regex di base per far sì che il suo codice highlight originale catturasse qualche altro elemento per ogni lingua.
Tutto ciò che dobbiamo fare è aggiungere una funzione shortcode in WordPress in modo che possiamo facilmente includere l'evidenziazione della sintassi ai nostri frammenti di codice usando il mio script Prism.js modificato. Il modo più semplice per incorporare tutto è quello di trasformare tutto in un plug-in. La nostra cartella di plugin finita sarà simile a questa:
Quindi iniziamo il nostro plugin con i campi richiesti:
/ * Nome plugin: Syntax Highlighter Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js Descrizione: Evidenzia i frammenti di codice con un facile utilizzo shortcode basato su Lea Verou's Prism.js. Versione: 1.0.0 Autore: c.bavota Autore URI: http://bavotasan.com * /
La prossima cosa che vogliamo aggiungere è il nostro hook shortcode effettivo e una correzione pre-processo per assicurarci che funzioni al momento giusto:
Accentsconagua
add_filter ('the_content', 'sh_pre_process_shortcode', 7); / ** * Funzionalità per impostare correttamente lo shortcode dell'evidenziatore. * * Questa funzione è allegata al gancio del filtro 'the_content'. * * @since 1.0.0 * / function sh_pre_process_shortcode ($ content) global $ shortcode_tags; $ orig_shortcode_tags = $ shortcode_tags; $ shortcode_tags = array (); // Nuovi shortcode add_shortcode ('code', 'sh_syntax_highlighter'); $ content = do_shortcode ($ content); $ shortcode_tags = $ orig_shortcode_tags; restituire $ content; / ** * Funzione shortcode codice * * Questa funzione è allegata al hook codice "codice". * * @since 1.0.0 * / function sh_syntax_highlighter ($ atts, $ content = null) extract (shortcode_atts (array ('type' => 'markup', 'title' => ", 'linenums' =>", ), $ atts)); $ title = ($ title)? 'rel = "'. $ title. '"': "; $ linenums = ($ linenums)? 'data-linenums ="'. $ lino. '"':"; $ find_array = array ('[', ']'); $ replace_array = array ('[', ']'); ritorno ' '. preg_replace_callback ('| (. *) | isU', 'sh_pre_entities', trim (str_replace ($ find_array, $ replace_array, $ content))). ''; / ** * Funzione di supporto per 'sh_syntax_highlighter' * * @since 1.0.0 * / function sh_pre_entities ($ corrisponde) return str_replace ($ corrisponde a [1], htmlentities ($ corrisponde a [1]), $ corrisponde a [0] );
Il sh_pre_process_shortcode () è necessaria la funzione in modo che la nostra sintassi di shortcode venga elaborata prima che tutti i filtri di contenuto inizino a ripulire il testo per impostazione predefinita in WordPress. La funzione helper filtrerà il nostro codice e sostituirà le entità HTML con il loro valore di entità appropriato.
Per far sì che il nostro plugin funzioni correttamente, abbiamo anche bisogno di aggiungere alcune funzioni per caricare i file CSS e JS.
add_action ('wp_enqueue_scripts', 'sh_add_js'); / ** * Carica tutto JavaScript per intestazione * * Questa funzione è collegata al hook di azione "wp_enqueue_scripts". * * @uses is_admin () * @uses is_singular () * @uses wp_enqueue_script () * @use plugins_url () * * @since 1.0.0 * / function sh_add_js () if (sh_has_shortcode ('code')) wp_enqueue_script ('sh_js', plugins_url ('js / sh.js', __FILE__), ",", vero); wp_enqueue_style ('sh_css', plugins_url ('css / sh.css', __FILE__)); / ** * Controlla i post per vedere se è stato utilizzato lo shortcode * * @since 1.0.0 * / function sh_has_shortcode ($ shortcode = ") global $ wp_query; foreach ($ wp_query-> post come $ post) if (! empty ($ shortcode) && stripos ($ post-> post_content, '['. $ shortcode)! == false) return true; return false; Abbiamo bisogno di accodare il nostro script e stili, ma solo se lo shortcode è stato utilizzato all'interno del contenuto del nostro post. Quindi perché abbiamo bisogno che la piccola funzione condizionale da controllare sia presente lo shortcode.
Aggiungere un quicktag per il nostro shortcode non è molto difficile quindi dovremmo farlo anche noi:
add_action ('admin_enqueue_scripts', 'sh_add_quicktags'); / ** * Aggiunge una sintassi di evidenziatore della sintassi all'editor dei post * * Questa funzione è collegata al hook dell'azione 'admin_print_footer_scripts'. * * @since 1.0.0 * / function sh_add_quicktags ($ hook) if ('post.php' == $ hook || 'post-new.php' == $ hook) wp_enqueue_script ('sh_quicktag_js', plugins_url (' js / quicktag.js ', __FILE__), array (' quicktags '), ", true); Questo è tutto ciò di cui abbiamo bisogno nel nostro quicktag.js file:
QTags.SyntaxButton = function () QTags.TagButton.call (this, 'syntax_highlighter', 'syntax highlighter', ", '[/ code]');; QTags.SyntaxButton.prototype = new QTags.TagButton (); QTags.SyntaxButton.prototype.callback = function (e, c, ed) var type, linenums, title, t = this; if (t.isOpen (ed) === false) type = prompt ('Tipo (markup , php, css, javascript) ',' markup '), title = prompt (' Titolo (opzionale) '), linenums = prompt (' Line number (opzionale) '); type = (type)?' type = "' + type + '"':"; title = (titolo)? 'title = "' + title + '"': "; linenums = (linenums)? 'linenums ="' + linenums + '"':"; if (type) t.tagStart = '[code' + type + title + linenums + ']'; QTags.TagButton.prototype.callback.call (t, e, c, ed); else QTags.TagButton.prototype.callback.call (t, e, c, ed); ; edButtons [150] = new QTags.SyntaxButton (); Per la mia evidenziazione della sintassi, preferisco un tema scuro, quindi ho creato i miei punti salienti usando il seguente CSS:
code [class * = "language-"], pre [class * = "language-"] color: #fff; text-shadow: 0 1px 1px # 000; famiglia di font: Menlo, Monaco, "Courier New", monospace; direzione: ltr; allineamento del testo: a sinistra; spaziatura delle parole: normale; white-space: pre; word-wrap: normale; altezza della linea: 1,4; sfondo: nessuno; confine: 0; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -mozzatori: nessuno; -ms-hyphens: none; trattini: nessuno; pre [class * = "language-"] code float: left; riempimento: 0 15px 0 0; pre [class * = "language-"],: not (pre)> codice [class * = "language-"] background: # 222; . sintassi-evidenziatore [rel] position: relativo; .syntax-highlighter [rel] pre [class * = "language-"] padding-top: 44px; .syntax-highlighter [rel]: before content: attr (rel); allineamento del testo: centro; text-shadow: 1px 1px 2px rgba (0,0,0,0,6); posizione: assoluta; top: -1px; sfondo: # 3A87AD; imbottitura: 5px 10px; a sinistra: 0; a destra: 0; font: grassetto 16px / 20px "myriad-pro-1", "myriad-pro-2", "Lucida Grande", Sans-Serif; colore: #fff; -moz-border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0; / * Blocchi di codice * / pre [class * = "language-"] padding: 15px; margine: 1em 0; overflow: auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; / * Codice in linea * /: non (pre)> codice [classe * = "lingua-"] padding: 5px 10px; altezza della linea: 1; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; .token.comment, .token.line-comment, .token.prolog, .token.doctype, .token.cdata color: # 797979; .token.selector, .token.operator, .token.punctuation color: #fff; .namespace opacity: .7; .token.tag, .token.boolean color: # ffd893; .token.atrule, .token.attr-value, .token.hex, .token.string color: # B0C975; .token.property, .token.entity, .token.url, .token.attr-name, .token.keyword color: # c27628; .token.regex color: # 9B71C6; .token.entity cursor: help; .token.function, .token.constant color: # e5a638; .token.variable color: # fdfba8; .token.number color: # 8799B0; .token.important, .token.deliminator color: # E45734; pre [data-line] position: relativo; imbottitura: 1em 0 1em 3em; .line-highlight position: absolute; a sinistra: 0; a destra: 0; padding: eredita 0; margin-top: 1em; / * Identico al padding-top * / background di .prism: rgba (255,255,255, .2); pointer-events: none; line-height: inherit; white-space: pre; .line-highlight: before, .line-highlight [data-end]: dopo content: attr (data-start); posizione: assoluta; sopra: .3em; a sinistra: .6em; larghezza minima: 1em; riempimento: 0 .5em; background-color: rgba (255,255,255, .3); colore: #fff; font: grass 65% / 1.5 sans-serif; allineamento del testo: centro; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; text-shadow: none; .line-highlight [data-end]: dopo content: attr (data-end); inizio: auto; in basso: .4em; / * per i numeri di riga * / ol.linenums margine: 0; riempimento: 0 0 0 35 px; .linenums li padding-left: 10px; border-left: 3px # d9d336 solido;
Lo shortcode del codice per il nostro evidenziatore di sintassi ha tre attributi: tipo, titolo e lino.
genere: ci sono quattro tipi di linguaggio che funzionano con il nostro evidenziatore: markup, css, php e javascript
titolo: puoi includere un titolo che verrà visualizzato sopra la casella Evidenziatore di sintassi (facoltativo)
linenums: aggiungi numeri di linea al tuo codice, a partire dal numero che hai impostato (opzionale)
L'unico attributo richiesto è "tipo", anche se per impostazione predefinita sarà "markup".
Mettere insieme un plugin per darti la possibilità di usare un shortcode per evidenziatori di sintassi ha pochi passi, ma per fortuna puoi sempre scaricare il plug-in e installarlo senza sapere come è stato messo insieme. Anche se parte del divertimento nell'uso di WordPress è capire come tutto funzioni, così puoi personalizzare le cose per far sì che funzioni davvero. In questo modo, se non sei un fan del mio tema oscuro puoi facilmente giocare con il CSS per modificare gli stili del tuo evidenziatore di sintassi in modo che corrisponda al tuo design.
.
