Aproape toți bloggerii, creatorii de cuprins sau dezvoltatorii de tehnologie trebuie uneori să afișeze fragmente de cod evidențiate pe blogul lor. Aceasta poate fi o durere de cap în sine. Cu toate acestea, evidențierea uneia sau mai multor linii în acest fragment poate fi, de asemenea, necesară și, din păcate, această funcționalitate nu face parte din majoritatea integrărilor de cod. Din fericire, pluginul SyntaxHighlighter Evolved există. Vă vom arăta cum să îl utilizați pentru a păstra codul cât mai curat și cât mai ușor de citit.
SintaxaHighlighter Evolved
Instalarea și activarea pluginului sunt simple. Îl puteți găsi în depozitul de pluginuri WP.org dar asigurați-vă că este bine făcut Alex Mills (Viper007Bond), pentru că într-adevăr, există o mulțime de rezultate. Știm totuși că acesta este fiabil și actualizat. Mai mult, acesta vine cu un bloc specializat pentru editorul Gutenberg. Ca să nu mai vorbim de o serie de parametri care vă permit să vă personalizați experiența, ceea ce îl face alegerea noastră pentru acest tip de sarcină.
În meniu Parametrii din tabloul de bord WordPress, veți găsi un articol nou numit SyntaxHighlighter . Continuați și faceți clic pe el. Acolo puteți regla fiecare lucru mic de care veți avea nevoie pentru a încorpora fragmente în site-ul dvs. WordPress.
Setări SyntaxHighlighter
Pagina de setări pentru plugin este relativ simplă. Un element special care ne place la acest plugin este că obțineți un număr bun de personalizări cu privire la modul în care este afișat codul pe site-ul dvs. Puteți adăuga clase CSS la încorporare, puteți ajusta umplutura cu numărul de linii, puteți alege tematică colorați, utilizați file inteligente și rupturi de rând și decideți cum se încarcă limbajul de codificare individual la nivelul întregului site.
Vrem să definim trei parametri particulari pe care majoritatea oamenilor ar trebui să îi cunoască.
Versiunea pluginului, numerele de linie și dimensiunile filei
Prima este ce versiune a pluginului încărcați. Deși pluginul rămâne actualizat în depozit, puteți alege între versiunile 2.x și 3.x ale plug-in-ului , în funcție de modul în care doriți să afișați codul. Ambele sunt sigure, cu toate acestea, fiecare oferă caracteristici specifice pe care celălalt nu le oferă (în momentul scrierii).
Dacă utilizatorii vă copiază codul este cel mai important, versiunea 3.x va face acest lucru. Cu toate acestea, dacă a dvs. este mai utilă pentru afișare decât utilitarul real, atunci noua linie din versiunea 2.x poate fi mai bună pentru dvs., deoarece elimină necesitatea de a utiliza bare de defilare. pentru fragmente de cod mari.
Apoi, trebuie să afișați sau nu numerele de linie. Pentru bucăți mari de cod și tutoriale, numerele de linie sunt de neprețuit. Cu toate acestea, atunci când aveți fragmente scurte, nu este necesar să le etichetați permanent ca rândurile 1 și 2. Eliminarea lor poate îmbunătăți în mod semnificativ aspectul codului.
Și atunci există dimensiunea filei încă controversat. Opțiunea implicită este 4, dar o puteți schimba cu orice număr doriți. Inclusiv valoarea corectă de 2. (Da, ne dăm seama că nu există o valoare corectă. Ne plac doar 2 spații pentru file.)
Codul dvs. și comenzile scurte
Dacă derulați până în partea de jos a paginii Parametrii , veți vedea o previzualizare mare a codului, precum și un număr mare de parametri shortcode. Timpul dvs. ar fi bine petrecut parcurgându-le, doar pentru a vedea ce poate face tot pluginul pentru a vă prezenta fragmentele. De asemenea, orice modificare pe care ați făcut-o mai sus la afișarea codului în setările de mai sus va fi reflectată aici. Deci, asigurați-vă că apăsați Salvare după ce ați modificat oricare dintre opțiuni.
Deși este posibil ca unii oameni să nu fie cei mai mari fani ai codurilor scurte, deoarece vă pot conecta la anumite pluginuri, credem că merită folosite, deoarece sunt inteligente și ușor de reținut. Dacă nu altceva, trebuie să vă amintiți două lucruri și apoi pluginul va funcționa la maximum pentru dvs.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
Sau unele variații. Dacă vă puteți aminti, sunteți încrezători cu privire la diferitele lucruri pe care le puteți face cu acest plugin. În timp ce puteți utiliza un identificator lung, pluginul SyntaxHighlighter este suficient de bine construit pentru a vă simplifica munca.
Folosiți coduri scurte
Oriunde puteți reda un shortcode, le puteți folosi. În Divi sau editorul clasic, puteți folosi modulul Text sau editorul TinyMCE și doar lipiți codul între coduri scurte. Datorită modului în care funcționează fila Vizual, vă sugerăm să utilizați fila Text pentru a păstra aceste formate de caractere speciale.
Dacă sunteți un utilizator Gutenberg / Block Editor, lucrurile sunt atât de simple. Puteți, din nou, utiliza blocul de text pentru aceasta. Chiar și mai ușor, blocul HTML personalizat. Ca mai sus, lipiți codul în etichetele shortcode.
Mai bine, blocul SyntaxHighlighter Evolved este el însuși. Instalarea plug-in include propriul bloc Gutenberg; deci, dacă nu sunteți un shortcode și nu doriți să vă deranjați cu setările, nu trebuie să faceți acest lucru. Găsiți blocul sub formatare și introduceți-l în mesajul sau pe pagina dvs.
Indiferent cum introduceți codul, veți vedea aceeași redare pe partea frontală a site-ului dvs. WordPress.
Pentru a rezuma
Este posibil să trebuiască să prezentați fragmente publicului dvs. din mai multe motive. Poate scrii tutoriale sau postezi soluții la problemele obișnuite pe care publicul le poate lua și le poate folosi după bunul plac? Dar, uneori, o integrare GitHub pur și simplu nu oferă tipul de experiență pe care o doriți utilizatorilor dvs. Acesta este momentul în care aveți nevoie de un plugin ca SyntaxHighlighter Evolved.
În doar câteva clicuri, cu puțină personalizare și un bloc sau un cod scurt Gutenberg, publicul tău îți va explora codul fără probleme.
