Nëse ofroni ndonjë softuer ose këshillë programimi, patjetër që do të dëshironi të ndani disa fragmente kodi. Kjo mënyrë e ndarjes së fragmenteve të kodit mund t'i ndihmojë ata të krijojnë një praktikë të shpejtë. Sidoqoftë, ndarja e kodit me të gjitha formatimet e nevojshme nuk është e mundur si parazgjedhje. Ajo që dua të them me formatim është theksimi i sintaksës. Akoma, është diçka mjaft e lehtë për tu bërë.
Për fat të mirë, nëse përdorni divi, duhet të dini se ekziston një mënyrë e integruar për ta bërë këtë me dorë, për të shtuar stile të personalizuara në këto copa kodi. Për më tepër, ka shtojca dhe RESSOURCES aplikacione të palëve të treta që mund të thjeshtojnë vërtet procesin e krijimit të fragmenteve estetikisht të këndshme dhe funksionale në Divi.
Në këtë manual, do t'ju tregoj se si të ndani copëzat e kodit në Divi (manualisht). Dhe gjithashtu do t'ju tregoj se si të krijoni blloqe copëza me Divi Builder, të cilat do t'ju çojnë në nivelin tjetër.
studim
Këtu keni një përmbledhje të skicave të skicave të mundshme në këtë manual.
Kutitë e copave të kodit me copa kodi shtuan mënyrën manuale.
Parakushtet për tutorial
Për këtë tutorial, gjithçka që ju nevojitet është Tema divi, i instaluar dhe aktiv. Ne do të ndërtojmë copat e kodit të mostrës nga e para duke përdorur Divi Builder në një faqe të re.
Për të filluar, krijoni një faqe të re dhe vendosni Divi Builder në ndërfaqen publike. Pastaj zgjidhni opsionin "Ndërto nga e para".
Tani ju jeni gati për të shkuar!
Dizajnimi i një kutie të personalizuar për copa kodi në Divi
Meqenëse copa jonë e kodit qëndron në një modul teksti, ne mund të përdorim ndërtuesin divi për të shtuar elemente të dizajnit në modulin e tekstit (dhe rreth tij). Për këtë dizajn, ne do të përdorim një modul përmbledhës për të shërbyer si etiketë për fragmentin. Tjetra, ne do të stilizojmë dhe pozicionojmë kursorin në të majtë të modulit të tekstit. Tjetra, ne do të stilojmë modulin e tekstit të fragmentit tonë.
Krijimi i seksionit, rreshtit dhe kolonës
Së pari duhet të krijojmë një seksion të ri me një rresht të një kolone.
Pastaj azhurnoni parametrat e linjës si më poshtë:
Gjerësia e zorrës së trashë: 1
Mbushje me porosi: 0px në krye, 0px në pjesën e poshtme
Shtoni modulin e tekstit
Pastaj shtoni një modul teksti në rresht.
Ju mund të lini përmbajtje sipas parazgjedhjes. Ne do t'i shtojmë më vonë copat tona të kodit të WordPress. Tani për tani, le të modelojmë modulin e tekstit duke përditësuar parametrat e mëposhtëm të tekstit:
Ngjyra e sfondit: # eff0f1 Ngjyra e tekstit: # 000000 Marzhi i personalizuar: 60px majtas Mbushja e personalizuar: 3% lart, 3% fund, 3% majtas, 3% djathtas
Gjerësia e kufirit të sipërm: 10px Ngjyra e kufirit të sipërm: # 7cda24
Krijimi i etiketës së copës
Për të krijuar etiketën e fragmentit, ne do të përdorim një modul blurb. Kjo do t'ju lejojë të shtoni një ikonë teksti blurb (ose ikonë të personalizuar të figurës) pranë gjuhës së kodit të shfaqur.
Krijoni një modul prezantimi dhe tërhiqeni atë sipër modulit të tekstit. Pastaj azhurnoni cilësimet e mëposhtme të prezantimit:
Titulli: css Përmbajtja: [hiqni përmbajtjen fiktive] Përdorni ikonën: PO Ikona: shihni pamjen e ekranit
Pastaj azhurnoni parametrat e projektimit si më poshtë:
Ngjyra e sfondit: # 1b2426 Ngjyra e ikonës: # 7cda24 Imazhi / Ikona Vendndodhja: majtas Madhësia e shkronjave: 20px Ngjyra e titullit të tekstit: #ffffff Madhësia e tekstit Titulli: 16px
Lartësia e Linjës së Titullit: Gjerësia 1.3em: Gjerësia 100px Marzha e personalizuar: -44 px poshtë, -50 px Mbushja e personalizuar e majtë: 10px lartë, 2px fund, 15px majtas, 15px djathtas
Dublikoni seksionin për të krijuar më shumë dizajne të kutisë së copave
Kjo mbështet modelin tonë të parë të kutisë së kodit. Tani thjesht duhet të kopjojmë pjesën që përmban dizajnin e bllokut të kodit dhe të azhurnojmë etiketën dhe ngjyrat për të krijuar një bllok të ri kodi për një gjuhë tjetër të kodimit. Kjo sigurisht që është opsionale, por nëse planifikoni të shtoni copa të ndryshme në një faqe, ndihmon që të keni një skemë të ndryshme ngjyrash për secilën.
Për shembull, kopjoni seksionin dhe hapni cilësimet e modulit Blurb.
Përditësoni titullin në "js" për Javascript.
Pastaj klikoni me të djathtën në Image / Icon Color dhe zgjidhni Gjeni dhe Zëvendësoni.
Opsionet e azhurnuara të kërkimit dhe zëvendësimit:
Në: këtë seksion Zëvendësoni me: [ngjyra e re] Zëvendësoni të gjitha: kontrolloni zëvendësoni të gjitha vlerat e gjetura
Tani keni një bllok të ri të fragmenteve për fragmente JS.
Këtu është një shembull i kutive të fragmenteve për llojet e kodeve të njohura për WordPress.
Përdorimi i kodit Prettify Code për të shtuar theksimin e sintaksës në copëzat manuale të kodit
Epo, është e vërtetë që me metodën manuale, menjëherë mund të ngjitni tekstin dhe të kaloni. Përcakto kodin e kodit menjëherë do të shtojë kod të theksuar në të gjitha etiketat "para". Bukuria e kësaj shtojce është se nuk kërkohet absolutisht asnjë përshtatje. E tëra çfarë ju duhet të bëni është të shkarkoni dhe aktivizoni shtojcën.
Këtu është një shembull se si do të duket kodi me Kodin aktiv të paragjykimit.
Kodi Prettify vjen nga Google dhe përdoret gjithashtu për të stilizuar të gjitha ato fragmente të mrekullueshme në stackoverflow.com.
Për ta përfunduar
Shikimi i copave të kodit në Divi nuk duhet të jetë e vështirë. Shtimi i fragmenteve manualisht duke përdorur etiketat e para dhe kodit Word të siguruara nga WordPress do të bëjë punën për shumicën e fragmenteve jo-html, por së pari duhet të ekzekutoni fragmentin përmes një koduesi. html të jesh i sigurt. Për më tepër, mund të personalizoni më tej stilin e tekstit të fragmentit duke përdorur cilësimet e modulit të tekstit. Dhe mos harroni Code Prettify për të shtuar theksime në fragmentet tuaja manuale.
Për ata prej jush që ndajnë rregullisht fragmente, përdorimi i shtojcës SyntaxHighlighter është ndoshta bastja juaj më e mirë. Sido që të jetë, gjithmonë do të keni mundësinë të shtoni skema më krijuese në fragmentet tuaja duke përdorur Divi Builder.
Fat i mirë.
