Ako nudite bilo koji savjet za softver ili programiranje, svakako ćete htjeti podijeliti neke isječke koda. Ovaj način dijeljenja isječaka koda može im pomoći da brzo uspostave praksu. Međutim, dijeljenje koda sa svim potrebnim formatiranjem prema zadanim postavkama nije moguće. Ono što mislim pod formatiranjem je isticanje sintakse. Ipak, to je nešto sasvim jednostavno učiniti.
Srećom, ako koristite divi, trebali biste znati da postoji ugrađeni način da to učinite ručno, kako biste ovim isječcima koda dodali prilagođene stilove. Osim toga, postoje dodaci i sredstva aplikacije trećih strana koje stvarno mogu pojednostaviti proces stvaranja estetski ugodnih i funkcionalnih isječaka u Diviju.
U ovom uputstvu pokazat ću vam kako dijeliti isječke koda u Divi (ručno). A također ću vam pokazati kako dizajnirati blokove isječaka s Divi Builder, koji će vas odvesti na sljedeću razinu.
pregled
Evo pregleda dizajna isječaka koji su mogući u ovom vodiču.
Okviri isječka koda s isječcima koda dodali su ručni način rada.
Preduvjeti za udžbenik
Za ovaj vodič, sve što trebate je Divi tema, instaliran i aktivan. Ispočetka ćemo izraditi ogledne isječke koda koristeći Divi Builder na novoj stranici.
Za početak stvorite novu stranicu i postavite Divi Builder na javno sučelje. Zatim odaberite opciju "Izgradi od nule".
Sad ste spremni za polazak!
Dizajn personaliziranog okvira za isječke koda na Divi
Budući da se naš isječak koda nalazi u tekstualnom modulu, možemo koristiti graditelj divi za dodavanje elemenata dizajna u tekstualni modul (i oko njega). Za ovaj dizajn koristit ćemo sažeti modul koji će služiti kao oznaka za isječak. Zatim ćemo oblikovati i postaviti kursor lijevo od tekstualnog modula. Zatim ćemo oblikovati tekstualni modul našeg isječka.
Izrada odjeljka, retka i stupca
Prvo moramo stvoriti novi odjeljak s retkom stupca.
Zatim ažurirajte parametre retka na sljedeći način:
Širina oluka: 1
Prilagođeno prilagođavanje: 0px pri vrhu, 0px pri dnu
Dodajte tekstualni modul
Zatim dodajte tekstni modul u redak.
Možete ostaviti sadržaj prema zadanim postavkama. Kasnije ćemo mu dodati naše isječke koda za WordPress. Za sada, modelirajmo tekstualni modul ažuriranjem sljedećih tekstualnih parametara:
Boja pozadine: # eff0f1 Boja teksta: # 000000 Prilagođena margina: 60px lijevo Prilagođeno umetanje: 3% gore, 3% dolje, 3% lijevo, 3% desno
Širina gornjeg obruba: 10px Boja gornjeg obruba: # 7cda24
Izrada oznake isječka
Da bismo stvorili oznaku isječka, upotrijebit ćemo modul za zamućivanje. To će vam omogućiti da dodate ikonu zamućenog teksta (ili prilagođenu ikonu slike) pored prikazanog jezika koda.
Izradite prezentacijski modul i povucite ga iznad tekstualnog modula. Zatim ažurirajte sljedeće postavke prezentacije:
Naslov: css Sadržaj: [ukloniti izmišljeni sadržaj] Upotrijebiti ikonu: DA Ikona: pogledajte snimak zaslona
Zatim ažurirajte parametre dizajna na sljedeći način:
Boja pozadine: # 1b2426 Boja ikone: # 7cda24 Lokacija slike / ikone: lijevo Veličina fonta: 20px Boja naslova teksta: #ffffff Veličina teksta: 16px
Visina retka naslova: 1.3em Širina: 100px Prilagođena margina: -44px odozdo, -50px lijevo Prilagođeno umetanje: 10px gore, 2px odozdo, 15px lijevo, 15px desno
Duplicirani odjeljak za stvaranje više dizajna okvira s isječcima
Ovo podržava naš prvi dizajn kutije s kodom. Sada samo moramo duplicirati odjeljak koji sadrži dizajn bloka koda i ažurirati naljepnicu i boje kako bismo stvorili novi blok koda za drugi jezik kodiranja. To je naravno neobavezno, ali ako planirate dodati različite isječke na stranicu, pomaže imati različitu shemu boja za svaku.
Na primjer, duplicirajte odjeljak i otvorite postavke modula Blurb.
Ažurirajte naslov na "js" za Javascript.
Zatim desnom tipkom miša kliknite Boja slike / ikone i odaberite Pronađi i zamjeni.
Ažurirane opcije pretraživanja i zamjene:
U: ovaj odjeljak Zamijeni sa: [nova boja] Zamijeni sve: označi zamjenu svih pronađenih vrijednosti
Sada imate novi blok isječaka za JS isječke.
Evo primjera okvira isječaka za popularne vrste kodova za WordPress.
Pomoću dodatka Prettify Code za dodavanje isticanja sintakse ručnim isječcima koda
Pa, istina je da ručnom metodom možete odmah zalijepiti tekst i proći. Prettify plugin za kodove odmah će dodati označeni kôd svim "pre" oznakama. Ljepota ovog dodatka je u tome što apsolutno nije potrebno prilagođavanje. Sve što trebate je preuzeti i aktivirati dodatak.
Evo primjera kako će kôd izgledati s Active Prettify Code.
Dolazi kod Prettify Google a koristi se i za stiliziranje svih onih prekrasnih isječaka stackoverflow.com.
Da završim
Pregled isječaka koda na Divi ne mora biti težak. Ručno dodavanje isječaka pomoću oznaka pre i Word koda koje nudi WordPress učinit će posao za većinu isječaka koji nisu html, ali prvo morate pokrenuti isječak kroz koder. html da bude siguran. Uz to, možete dodatno prilagoditi stil teksta isječka pomoću postavki tekstualnog modula. Ne zaboravite Code Prettify da biste istaknuli ručne isječke.
Za one od vas koji redovito dijelite isječke, upotreba dodatka SyntaxHighlighter vjerojatno je vaša najbolja oklada. U svakom slučaju, uvijek ćete imati mogućnost dodati više kreativnih dizajna u svoje isječke pomoću Divi Builder.
Bonne šanse.
