[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: cea mai ușoară temă WordPress de utilizat

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62.

Aproape fiecare blogger, creator de conținut sau dezvoltator de tehnologie trebuie să posteze din când în când fragmente evidențiate pe blogul lor. 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ă, iar această funcționalitate nu face parte din majoritatea integrărilor de cod. 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.

SintaxaHighlighter Evolved

Marcator de sintaxă

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ă.

Plugin pentru wordpress pentru evidențiere a sintaxei

Î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 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 rânduri, alege teme de culoare, utilizați file inteligente și întreruperi de linie și decideți dacă încărcați evidențierea individuală a limbii de codare. la nivel de site.

Configurație pentru sintaxă

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).

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați Ușor și Gratuit orice site web sau design de blog cu aspect profesional. Nu mai plătiți mult pentru un site web pe care îl puteți face singur.

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.

Vrei să-ți vinzi produsele pe internet?

Descărcați gratuit WooCommerce, cele mai bune pluginuri de comerț electronic pentru a vă vinde produsele fizice și digitale pe WordPress și pentru a vă crea cu ușurință magazinul online. Perfect pentru incepatori.

Ș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.

A se vedea modificările pentru sintaxi divi

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 crea un shortcode, le puteți folosi. În Divi sau editorul clasic, puteți utiliza modulul Text sau editorul TinyMCE și pur și simplu lipiți codul între codurile scurte. Datorită modului în care funcționează fila Visual, vă sugerăm să utilizați Text pentru a păstra aceste formate de caractere speciale.

Parametru text Divi

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.

Blochează html gutenberg divi

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.

Sintaxă highliter gutenberg

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.

1 acțiuni
acțiune1
tweet
Registru