Ako nudite bilo koji savjet za softver ili programiranje, svakako ćete htjeti podijeliti 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 nije moguće prema zadanim postavkama. Ono što mislim pod formatiranjem je isticanje sintakse. Ipak, to je nešto prilično lako učiniti.
Na sreću, ako koristite divi, trebali biste znati da postoji ugrađeni način da to učinite ručno, kako biste dodali prilagođene stilove ovim isječcima koda. Osim toga, postoje dodaci i sredstva aplikacije trećih strana koje zaista mogu pojednostaviti proces kreiranja 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đe ću vam pokazati kako dizajnirati blokove isječaka pomoću Divi Builder-a, koji će vas odvesti na sljedeći nivo.
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 tutorijal, sve što vam treba je Divi tema, instaliran i aktivan. Napravit ćemo primjer isječaka koda od nule 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 divi graditelj 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, redaka i stupca
Prvo moramo stvoriti novi odjeljak s retkom stupca.
Zatim ažurirajte parametre linije na sljedeći način:
Širina oluka: 1
Prilagođeno prilagođavanje: 0px na vrhu, 0px na dnu
Dodajte tekstualni modul
Zatim u tekst dodajte tekstualni modul.
Boja pozadine: # eff0f1 Boja teksta: # 000000 Prilagođena margina: 60px lijevo Prilagođeno podmetanje: 3% gore, 3% dolje, 3% lijevo, 3% desno
Širina gornjeg obruba: 10px Boja gornjeg obruba: # 7cda24
Izrada oznake isječka
Da bismo kreirali oznaku isječka, upotrijebit ćemo blurb modul. To će vam omogućiti da dodate ikonu zamućenog teksta (ili prilagođenu ikonu slike) pored prikazanog jezika koda.
Stvorite 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
Boja pozadine: # 1b2426 Boja ikone: # 7cda24 Lokacija slike / ikone: lijevo Veličina fonta: 20px Boja naslova teksta: #ffffff Veličina teksta Naslov: 16px
Visina retka naslova: 1.3em Širina: 100px Prilagođena margina: -44px odozdo, -50px lijevo Prilagođeno podmetanje: 10px odozgo, 2px odozdo, 15px lijevo, 15px desno
Dvostruki 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. Ovo 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 zamijeni.
U: ovaj odjeljak Zamijenite sa: [nova boja] Zamijeni sve: označite zamjenu svih pronađenih vrijednosti
Sada imate novi blok isječaka za JS isječke.
Evo primjera isječaka za popularne tipove koda za WordPress.
Pomoću dodatka Prettify Code za dodavanje sintakse u ručne isječke koda
Pa, tačno je da ručnom metodom možete odmah zalijepiti tekst i proći. u Prettify Code plugin 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.
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 istakli ručne isječke.
Za one od vas koji redovito dijelite isječke, upotreba dodatka SyntaxHighlighter vjerojatno je vaša najbolja opklada. U svakom slučaju, uvijek ćete imati mogućnost dodati više kreativnih dizajna u svoje isječke pomoću Divi Builder.
Sretno.