Share
Modificarea sintaxei a devenit destul de standardă în majoritatea site-urilor de instruire (după cum puteți vedea mai jos) și există multe opțiuni disponibile, toate în funcție de limbile pe care le utilizați și de modul în care doriți să fie afișate fragmentele de cod.
Pentru cea mai lungă perioadă de timp, am folosit programul Google Translate, deoarece a fost ușor de configurat. Singura problemă reală pe care am avut-o a fost că nu a captat toate elementele corespunzătoare din codul meu și le-a evidențiat în consecință. Am încercat să o mai lucrez, dar nu era cel mai simplu cod pentru a naviga.
Din fericire, recent am dat peste un nou semnalizator de sintaxă ușor de Lea Verou, numit Prism.js, care oferă posibilitatea de a se extinde pe baza HTML și CSS marcând evidențierea cu niște cârliguri simple de plugin.
Am luat codul de bază JavaScript și am adăugat opțiunea de a include numerotarea liniilor și evidențierea PHP. Am modificat, de asemenea, câteva din modelele sale de baza pentru a le face codul original de evidențiere să captureze mai multe elemente pentru fiecare limbă.
Tot ce trebuie să facem este să adăugăm o funcție de scurtătură în WordPress, astfel încât să putem include cu ușurință sintaxa evidențiind fragmentele noastre de cod utilizând scriptul Prism.js modificat. Cel mai simplu mod de a încorpora totul este să faci totul într-un plugin. Dosarul de pluginuri finalizat va arăta astfel:
Deci, să începem pluginul cu câmpurile necesare:
/ * Nume Plugin: URI Plugin-ul de marire a sintaxei: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js Descriere: Evidențiați fragmentele de cod cu un ușor de utilizat shortcode pe baza Prism.js a lui Lea Verou. Versiune: 1.0.0 Autor: c.bavota Autor URI: http://bavotasan.com * /
Următorul lucru pe care dorim să-l adăugăm este cârligul nostru real de coduri scurte și un remediu pre-proces pentru a vă asigura că acesta se declanșează la momentul potrivit:
Accentsconagua
add_filter ('the_content', 'sh_pre_process_shortcode', 7); / ** * Funcționalitate pentru a seta corect codul de marcaj al evidențiatorului. * * Această funcție este atașată la cârligul de filtrare "the_content". * * @ din 1.0.0 * / funcția sh_pre_process_shortcode ($ content) global $ shortcode_tags; $ orig_shortcode_tags = $ shortcode_tags; $ shortcode_tags = array (); // Coduri scurte noi add_shortcode ('code', 'sh_syntax_highlighter'); $ content = do_shortcode (conținut $); $ shortcode_tags = $ orig_shortcode_tags; returnați conținut $; / ** * Funcția de cod scurtcode * * Această funcție este atașată la cârligul de cod "cod". * * @ din 1.0.0 * / funcția sh_syntax_highlighter ($ atts, $ content = null) extras (shortcode_atts (array ('type' => 'markup', 'title' => ), $ atts)); $ title = (titlu $)? 'rel =' '. $ title.' ''; '; $ linenums = ($ linenums)' data-linenums = "'. $ linenums. "": "; $ find_array = array ('[', ']'); $ replace_array = array ('[', ']'); întoarcere ' ". preg_replace_callback ('| (. *) | isU', 'sh_pre_entities', trim (str_replace ($ find_array, $ replace_array, $ content))). '„; / ** * Funcția helper pentru 'sh_syntax_highlighter' * * @ din 1.0.0 * / funcția sh_pre_entities ($ meciuri) return str_replace ($ matches [1], htmlentities ($ matches [ );
sh_pre_process_shortcode () este necesară o scriere a sintaxei codului nostru scurt înainte ca toate filtrele de conținut să înceapă să curețe textul în mod implicit în WordPress. Funcția helper va filtra codul nostru și va înlocui entitățile HTML cu valoarea corespunzătoare a entității.
Cu toate acestea, pentru ca plugin-ul nostru să funcționeze corect, trebuie să adaugăm și câteva funcții suplimentare pentru încărcarea fișierelor CSS și JS.
add_action ('wp_enqueue_scripts', 'sh_add_js'); / ** * Încărcați toate JavaScript în header * * Această funcție este atașată la cârligul de acțiune 'wp_enqueue_scripts'. (*) * @ @ is_admin () * @used este_admin () * @utilizator_script () * @used wp_enqueue_script () * @ ("sh_js", plugins_url ("js / sh.js", __FILE__), ",", adevărat); wp_enqueue_style ('sh_css', plugins_url ('css / sh.css', __FILE__)); / ** * Verificați mesajele pentru a vedea dacă a fost folosit codul scurt * * @since 1.0.0 * / funcția sh_has_shortcode ($ shortcode = ") global $ wp_query; foreach ($ wp_query-> posts as $ post) ($ empty-> false); return false; Trebuie să enquege scriptul și stilurile noastre, dar numai dacă codul scurt a fost utilizat în cadrul conținutului nostru post. Prin urmare, de ce avem nevoie de această funcție condițională mică pentru a verifica dacă codul scurt este prezent.
Adăugarea unui cod rapid pentru codul nostru scurt nu este foarte greu, așa că am putea să o facem:
add_action ('admin_enqueue_scripts', 'sh_add_quicktags'); / ** * Adaugă un rapidtag la un editor de post * * Această funcție este atașată la cârligul de acțiune 'admin_print_footer_scripts'. * * @ din 1.0.0 * / funcția sh_add_quicktags ($ hook) if ('post.php' == $ hook || 'post-new.php' == $ hook) wp_enqueue_script ('sh_quicktag_js', plugins_url (' js / quicktag.js ', __FILE__), matrice (' quicktags '),', true); Asta e tot ce avem nevoie în noi quicktag.js fişier:
QTags.SyntaxButton = funcția () QTags.TagButton.call (aceasta este "syntax_highlighter", "highlight sintaxa", "," [/ code] ';); QTags.SyntaxButton.prototype = new QTags.TagButton (); QTags.SyntaxButton.prototype.callback = funcția (e, c, ed) var tipul, linenums, title, t = aceasta; if (t.isOpen (ed) === false) , php, css, javascript) ',' markup '), title = prompt (' Titlu (opțional) '), linenums = + tip + '' ': "; titlu = (titlu)? 'title =' '+ title +' '': "; linenums = (linenums)? 'linenums ="' + linenums + '' ': "; dacă (tip) t.tagStart = '[cod "+ tip + titlu + linenums +'] '; QTags.TagButton.prototype.callback.call (t, e, c, ed); altceva QTags.TagButton.prototype.callback.call (t, e, c, ed); ; edButtons [150] = nou QTags.SyntaxButton (); Pentru a evidenția sintaxa mea, prefer o temă întunecată, așa că am creat evidențiază folosind următoarele CSS:
cod [clasa * = "limba"], pre [clasa * = "limba"] culoare: #fff; text-shadow: 0 1px 1px # 000; font-familie: Menlo, Monaco, "Courier New", monospace; direcție: ltr; text-aliniere: stânga; distanța cuvântului: normal; spațiu alb: pre; cuvânt-wrap: normal; linia-înălțime: 1,4; fundal: nici unul; frontieră: 0; -moz-tab-size: 4; -o-tab-size: 4; file-size: 4; -webkit-cratime: nici unul; -moz-cratițe: nici unul; -ms-cratime: nici unul; cratime: nici unul; pre [clasa * = "limbă-"] cod float: left; umplutura: 0 15px 0 0; pre [clasa * = "limba-"],: nu (pre)> code [clasa * = "limba-"] fundal: # 222; .syntax-evidențiator [rel] position: relative; .syntax-highlighter [rel] pre [clasa * = "limba"] padding-top: 44px; .syntax-highlighter [rel]: înainte de content: attr (rel); text-align: centru; text-shadow: 1px 1px 2px rgba (0,0,0,0,6); poziția: absolută; top: -1px; fundal: # 3A87AD; padding: 5px 10px; stânga: 0; dreapta: 0; font: bold 16px / 20px "myriad-pro-1", "myriad-pro-2", "Lucida Grande", Sans-Serif; culoare: #fff; -moz-border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; raza de graniță: 7px 7px 0 0; / * Blocurile de coduri * / pre [class * = "language-"] padding: 15px; marja: 1em 0; overflow: auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; raza de graniță: 8px; / * Cod inline * /: nu (pre)> code [class * = "limbă-"] padding: 5px 10px; linia-înălțime: 1; -moz-border-radius: 3px; -webkit-border-radius: 3px; raza de graniță: 3 pixeli; .token.comment, .token.line-comentariu, .token.prolog ,.token.doctype, .token.cdata culoare: # 797979; .token.selector, .token.operator, .token.punctuație culoare: #fff; .namespace opacitate: .7; .token.tag, .token.boolean culoare: # ffd893; .token.atrule, .token.atr-valoare, .token.hex, .token.string culoare: # B0C975; .token.property, .token.entity, .token.url, .token.attr-nume, .token.keyword culoare: # c27628; .token.regex culoare: # 9B71C6; .ocen.entity cursor: help; .token.function, .token.constant culoare: # e5a638; .token.variabil culoare: # fdfba8; . număr de ordine culoare: # 8799B0; .token.important, .token.deliminator culoare: # E45734; pre [linie de date] poziție: relativă; umplutură: 1em 0 1em 3em; .line-evidențiază position: absolute; stânga: 0; dreapta: 0; umplutura: moșteni 0; marginea superioară: 1em; / * Același lucru ca și umplutura de la .prism * / fundal: rgba (255,255,255, .2); pointer-events: nici unul; line-height: moștenire; spațiu alb: pre; .line-highlight: înainte, .line-highlight [data-end]: după content: attr (data-start); poziția: absolută; top: .3em; stânga: .6em; min-lățime: 1em; umplutura: 0. fundal-culoare: rgba (255,255,255, .3); culoare: #fff; font: bold 65% / 1.5 sans-serif; text-align: centru; -moz-border-radius: 8px; -webkit-border-radius: 8px; raza de graniță: 8px; text-umbra: nici unul; .line-highlight [data-end]: după content: attr (data-end); top: auto; fund: .4em; / * pentru numerele de linie * / ol.linenums margin: 0; umplutură: 0 0 0 35px; .linenums li padding-left: 10px; margine stângă: 3px # d9d336 solid;
Codul shortcode pentru martorul nostru de sintaxă are trei atribute: tipul, titlul și linenums.
tip: există patru tipuri de limbi care funcționează cu evidențiarea noastră: markup, css, php și javascript
titlu: puteți include un titlu care va apărea deasupra casetei de marcă a sintaxei (opțional)
linenums: adăugați numere de linie în codul dvs., începând de la numărul pe care îl setați (opțional)
Singurul atribut necesar este "type", deși va fi implicit "markup".
Punerea împreună a unui plugin pentru a vă oferi posibilitatea de a utiliza un shortcode de marcator de sintaxă are câțiva pași, dar, din fericire, puteți oricând să descărcați pluginul și să îl instalați fără a trebui să știi cum a fost pus împreună. Cu toate că unele dintre distractiv în utilizarea WordPress este înțelegerea modului în care funcționează totul, astfel încât să puteți personaliza lucrurile pentru a obține într-adevăr să lucreze pentru tine. În acest fel, dacă nu sunteți un fan al temei mele întunecate, puteți juca cu ușurință cu CSS pentru a modifica stilurile marcatorului de sintaxă astfel încât să se potrivească designului dvs..
.
