Cum să afișați fragmente de cod evidențiate pe site-ul dvs. WordPress

Aproape fiecare blogger tehnologic, creator de conținut sau dezvoltator trebuie să afișeze uneori fragmente de cod evidențiate pe blogul lor. Aceasta poate fi o durere de cap în sine. Cu toate acestea, evidențierea unei linii sau a unor linii din acel fragment poate fi, de asemenea, necesară, iar această caracteristică nu face parte din majoritatea codurilor încorporate. Din fericire, există pluginul SyntaxHighlighter Evolved. Vă vom arăta cum să îl utilizați pentru a menține codul cât mai curat și mai ușor de citit.

Abonați-vă la canalul nostru Youtube

SyntaxHighlighter Evolved

Instalarea și activarea pluginului sunt simple. Îl puteți găsi în depozitul de pluginuri WP.org, dar asigurați-vă că îl obțineți pe Alex Mills (Viper007Bond) . Există o mulțime de pluginuri cu nume și caracteristici similare, dar știm că acesta este fiabil și este actualizat. În plus, 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 meniul Setări din tabloul de bord WordPress, veți găsi un nou articol numit SyntaxHighlighter . Continuați și dați clic pe el. Acolo, puteți ajusta fiecare lucru mic de care veți avea nevoie pentru a încorpora fragmentele de cod î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 mare de personalizări cu privire la modul în care codul este afișat pe site-ul dvs. Puteți adăuga clase CSS la încorporare, reglați umplerea numărului de linie, alege teme de culoare, utilizați file inteligente și înfășurare de cuvinte și decideți cum să încărcați evidențierea limbajului de codare individual la o scară la nivel de site.

Vrem să scoatem la iveală trei setări speciale pe care credem că majoritatea oamenilor ar trebui să le cunoască.

Versiunea pluginului, numerele de linie și dimensiunea filelor

Prima este ce versiune a pluginului încărcați. În timp ce pluginul în sine este actualizat la repo, în funcție de modul în care doriți să afișați cel mai bine codul dvs., puteți alege între versiunile 2.x și 3.x ale pluginului . Ambele sunt sigure, cu toate acestea, fiecare oferă caracteristici specifice pe care celălalt nu le oferă (cel puțin în momentul scrierii acestui articol).

Dacă utilizatorii care vă copiază codul este cel mai important, atunci versiunea 3.x va merge bine. Cu toate acestea, dacă al tău este mai mult pentru afișare decât utilitate reală, ambalarea cuvintelor din versiunea 2.x poate fi mai potrivită pentru tine, deoarece evită nevoia de bare de defilare pe fragmente mari de cod.

Apoi trebuie să afișați sau nu numerele de linie. Pentru bucăți mari de cod și tutoriale, numerele de linie sunt neprețuite. Cu toate acestea, atunci când aveți fragmente scurte, nu este nevoie să le etichetați continuu ca rândurile 1 și 2. Eliminarea acestora poate curăța aspectul codului destul de mult.

Și apoi există dimensiunea de filă mereu 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 place doar 2 spații pentru file.)

Codul și codurile scurte

Dacă derulați în partea de jos a paginii Setări , veți vedea o previzualizare mare a codului, precum și un număr mare de parametri ai codului scurt. Timpul dvs. ar fi bine petrecut trecând peste ele, doar pentru a vedea ce poate face tot pluginul pentru a evidenția fragmentele de cod. În plus, toate modificările pe care le-ați făcut mai sus la modul în care codul se afișează în setările de mai sus vor fi reflectate aici. Deci, asigurați-vă că apăsați Salvare după ce ați modificat oricare dintre opțiuni.

Deși unii oameni nu sunt cei mai mari fani ai codurilor scurte, deoarece vă pot lega de anumite pluginuri, credem că merită să le folosiți, deoarece sunt inteligente și sunt ușor de reținut. Dacă nu altceva, trebuie să vă amintiți două lucruri și apoi pluginul va funcționa la cel mai bun nivel pentru dvs.

• sau

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  , și este formatat și evidențiat.

  Utilizarea codurilor scurte

  Oriunde puteți reda un shortcode, le puteți folosi. În Divi sau editorul clasic, puteți utiliza modulul Text sau editorul TinyMCE și puteți lipi codul între codurile scurte. Vă sugerăm, din cauza modului în care funcționează fila Visual, să utilizați fila Text pentru a menține formatarea specială a caracterelor.

  

  Dacă sunteți un utilizator Gutenberg / Block Editor, lucrurile sunt la fel de simple. Puteți, din nou, utiliza blocul Text pentru aceasta. Chiar și mai ușor decât acesta este blocul HTML personalizat. La fel ca mai sus, lipiți codul în etichetele shortcode.

  

  Cu toate acestea, chiar mai bine de atât este blocul SyntaxHighlighter Evolved în sine. Cu instalarea pluginului este inclus propriul bloc Gutenberg, astfel încât, dacă nu sunteți o persoană cu cod scurt și nu doriți să jucați cu parametrii, nu trebuie să faceți acest lucru. Pur și simplu găsiți blocul sub Formatare și introduceți-l în postarea sau pagina dvs.

  

  Indiferent de modul în care introduceți codul, veți vedea aceeași redare pe partea frontală a site-ului dvs. WordPress.

  

  Terminand

  Există multe motive pentru care este posibil să aveți nevoie să prezentați fragmente de cod publicului dvs. Poate scrii tutoriale sau poate postezi remedieri la problemele obișnuite pe care publicul să le ia și să le folosească după cum au nevoie. Dar, uneori, o încorporare GitHub pur și simplu nu oferă utilizatorilor exact experiența dorită. Atunci trebuie să aveți un plugin ca SyntaxHighlighter Evolved. Cu câteva clicuri, puțină personalizare și fie cu un bloc Gutenberg, fie cu un shortcode, publicul dvs. va trece prin codul dvs. fără nicio problemă.

  Ce utilizări ați putea găsi pe site-ul dvs. pentru a evidenția codul de acest fel?

  Imagine prezentată de articol de Adil Bouyghajden / shutterstock.com