Dacă oferiți orice sfat de programare sau software, veți dori cu siguranță să partajați fragmente de cod. Acest mod de a partaja fragmente de cod îi poate ajuta să stabilească rapid o practică. Cu toate acestea, partajarea codului cu toate formatările necesare nu este posibilă în mod implicit. Ceea ce vreau să spun prin formatare este evidențierea sintaxei. Totuși, este ceva destul de ușor de făcut.
Din fericire, dacă utilizați divi, ar trebui să știți că există o modalitate încorporată de a face acest lucru manual, de a adăuga stiluri personalizate la aceste fragmente de cod. În plus, există pluginuri și Resurse aplicații terță parte care pot simplifica cu adevărat procesul de creare a fragmentelor funcționale și plăcute din punct de vedere estetic în Divi.
În acest tutorial, vă voi arăta cum să partajați fragmente de cod în Divi (manual). Și vă voi arăta, de asemenea, cum să proiectați blocuri de fragmente cu Divi Builder, care vă va duce la nivelul următor.
studiu
Iată o prezentare generală a proiectelor de fragmente posibile în acest tutorial.
Casetele cu fragmente de cod cu fragmente de cod au adăugat modul manual.
Condiții preliminare pentru tutorial
Pentru acest tutorial, tot ce aveți nevoie este Divi tema, instalat și activ. Vom construi fragmente de cod eșantion de la zero folosind Divi Builder pe o pagină nouă.
Pentru a începe, creați o pagină nouă și implementați Divi Builder pe interfața publică. Apoi alegeți opțiunea „Construiți de la zero”.
Acum ești gata de plecare!
Proiectarea unei cutii personalizate pentru fragmente de cod pe Divi
Deoarece fragmentul nostru de cod se află într-un modul text, putem folosi constructorul divi pentru a adăuga elemente de design în modulul text (și în jurul acestuia). Pentru acest design, vom folosi un modul rezumat pentru a servi ca etichetă pentru fragment. Apoi, vom stiliza și poziționa cursorul în stânga modulului de text. Apoi, vom stiliza modulul text al fragmentului nostru.
Crearea secțiunii, rândului și coloanei
Mai întâi trebuie să creăm o nouă secțiune cu un rând de coloană.
Apoi actualizați parametrii liniei după cum urmează:
Lățimea jgheabului: 1
Plăcuță personalizată: 0px în partea de sus, 0px din partea de jos
Adăugați modulul de text
Apoi adăugați un modul text la linie.
Puteți părăsi cuprins în mod implicit. Vom adăuga fragmentele de cod WordPress la acesta mai târziu. Deocamdată, să modelăm modulul de text prin actualizarea următorilor parametri de text:
Culoare fundal: # eff0f1 Culoare text: # 000000 Marjă personalizată: 60px stânga Căptușeală personalizată: 3% sus, 3% jos, 3% stânga, 3% dreapta
Lățimea chenarului superior: 10 px Culoarea chenarului superior: # 7cda24
Crearea etichetei fragmentului
Pentru a crea eticheta fragmentului, vom folosi un modul de blurb. Acest lucru vă va permite să adăugați o pictogramă text blurb (sau pictogramă imagine personalizată) lângă limba codului afișat.
Creați un modul de prezentare și trageți-l deasupra modulului de text. Apoi actualizați următoarele setări de prezentare:
Titlu: css Conținut: [eliminați conținutul fictiv] Utilizați pictograma: DA Pictogramă: vedeți captura de ecran
Apoi actualizați parametrii de proiectare după cum urmează:
Culoare fundal: # 1b2426 Culoare pictogramă: # 7cda24 Locație imagine / pictogramă: stânga Dimensiune font: 20px Culoare titlu text: #ffffff Dimensiune text Titlu: 16px
Înălțimea liniei de titlu: 1.3em Lățime: 100px Marjă personalizată: -44px jos, -50px stânga Căptușeală personalizată: 10 px sus, 2 px jos, 15 px stânga, 15 px dreapta
Duplicați secțiunea pentru a crea mai multe modele de cutii de fragmente
Aceasta susține primul nostru design de cutie de cod. Acum trebuie doar să duplicăm secțiunea care conține designul blocului de cod și să actualizăm eticheta și culorile pentru a crea un nou bloc de cod pentru un alt limbaj de codificare. Acest lucru este desigur opțional, dar dacă intenționați să adăugați fragmente diferite la o pagină, vă ajută să aveți o schemă de culori diferită pentru fiecare.
De exemplu, dublați secțiunea și deschideți setările modulului Blurb.
Actualizați titlul la „js” pentru Javascript.
Apoi faceți clic dreapta pe Culoare imagine / pictogramă și selectați Găsire și înlocuire.
Opțiuni actualizate de căutare și înlocuire:
În: această secțiune Înlocuiește cu: [culoare nouă] Înlocuiește toate: verifică înlocuiește toate valorile găsite
Acum aveți un nou bloc de fragmente pentru fragmente JS.
Iată un exemplu de cutii de fragmente pentru tipurile de cod populare pentru WordPress.
Utilizând modulul Prettime Cod pentru a adăuga evidențierea sintaxei în fragmente de cod manual
Ei bine, este adevărat că, cu metoda manuală, puteți insera imediat text și trece. Prettime cod plugin va adăuga instantaneu cod evidențiat la toate etichetele „pre”. Frumusețea acestui plugin este că nu este absolut necesară personalizarea. Tot ce trebuie să faceți este să descărcați și să activați pluginul.
Iată un exemplu despre cum va arăta codul cu Active Prettify Code.
Codul Prettify vine de la Google și este, de asemenea, folosit pentru a stiliza toate acele fragmente minunate stackoverflow.com.
Pentru a termina
Vizualizarea fragmentelor de cod pe Divi nu trebuie să fie dificilă. Adăugarea manuală a fragmentelor folosind etichetele de cod pre și Word furnizate de WordPress va face treaba pentru majoritatea fragmentelor non-html, dar mai întâi trebuie să rulați fragmentul printr-un codificator. html pentru a fi sigur. În plus, puteți personaliza în continuare stilul textului fragmentului utilizând setările modulului text. Și nu uitați de codul Prettify pentru a adăuga evidențierea fragmentelor dvs. manuale.
Pentru cei dintre voi care partajează în mod regulat fragmente, folosirea pluginului SyntaxHighlighter este probabil cel mai bun pariu. Oricum ar fi, veți avea întotdeauna opțiunea de a adăuga modele mai creative la fragmentele dvs. folosind Divi Builder.
Mult noroc.
