Ak ponúknete akýkoľvek tip na programovanie alebo programovanie, určite budete chcieť zdieľať útržky kódu. Tento spôsob zdieľania útržkov kódu im môže pomôcť rýchlo nastaviť prax. Zdieľanie kódu so všetkým potrebným formátovaním však nie je predvolene možné. Čo mám na mysli pod formátovaním, je zvýraznenie syntaxe. Napriek tomu je to niečo celkom ľahké.
Našťastie, ak používate divi, mali by ste vedieť, že existuje vstavaný spôsob, ako to urobiť manuálne, aby ste do týchto úryvkov kódu pridali vlastné štýly. Okrem toho existujú pluginy a zdroje aplikácie tretích strán, ktoré môžu skutočne zjednodušiť proces vytvárania esteticky príjemných a funkčných úryvkov v Divi.
V tomto tutoriále vám ukážem, ako zdieľať útržky kódu v Divi (manuálne). A tiež vám ukážem, ako navrhnúť úryvkové bloky pomocou aplikácie Divi Builder, ktorá vás posunie na ďalšiu úroveň.
prehľad
Tu je prehľad návrhov úryvkov, ktoré sú možné v tomto výučbe.
Krabičky s úryvkami kódu a útržky kódu pridali manuálny režim.
Predpoklady pre výučbu
Pre tento tutoriál potrebujete iba Divi téma, nainštalovaný a aktívny. Vzorové úryvky kódu vytvoríme úplne od začiatku pomocou Divi Buildera na novej stránke.
Ak chcete začať, vytvorte novú stránku a nasaďte program Divi Builder na verejné rozhranie. Potom vyberte možnosť „Vytvoriť od začiatku“.
Teraz ste pripravení ísť!
Dizajn personalizovaného boxu na útržky kódu v Divi
Pretože náš útržok kódu je umiestnený v textovom module, môžeme pomocou nástroja na tvorbu divi pridať prvky návrhu do textového modulu (a okolo neho). Pre tento dizajn použijeme súhrnný modul, ktorý bude slúžiť ako štítok pre úryvok. Ďalej upravíme štýl a umiestnime kurzor doľava od textového modulu. Ďalej upravíme štýl textového modulu nášho úryvku.
Vytvorenie sekcie, riadku a stĺpca
Najprv musíme vytvoriť novú sekciu s riadkom stĺpca.
Potom aktualizujte parametre linky nasledovne:
Šírka odkvapov: 1
Vlastné polstrovanie: 0px v hornej časti, 0px v dolnej časti
Pridajte textový modul
Potom do riadku pridajte textový modul.
Môžete opustiť obsah predvolene. Neskôr doň pridáme naše útržky kódu WordPress. Teraz poďme modelovať textový modul aktualizáciou nasledujúcich parametrov textu:
Farba pozadia: # eff0f1 Farba textu: # 000000 Vlastný okraj: 60 pixelov vľavo Vlastné polstrovanie: 3% hore, 3% dole, 3% vľavo, 3% vpravo
Šírka horného okraja: 10 pixelov Farba horného okraja: # 7cda24
Vytvára sa štítok úryvku
Na vytvorenie štítka úryvku použijeme reklamný modul. To vám umožní pridať ikonu textu (alebo ikonu vlastného obrázka) vedľa zobrazeného jazyka kódu.
Vytvorte prezentačný modul a presuňte ho nad textový modul. Potom aktualizujte nasledujúce nastavenia prezentácie:
Názov: css Obsah: [odstrániť fiktívny obsah] Ikona použitia: ÁNO Ikona: pozri snímku obrazovky
Potom aktualizujte parametre návrhu nasledovne:
Farba pozadia: # 1b2426 Farba ikony: # 7cda24 Umiestnenie obrázka / ikony: vľavo Veľkosť písma: 20px Farba názvu textu: #ffffff Názov veľkosti textu: 16px
Výška nadpisu: 1.3 cm Šírka: 100 pixelov Vlastná marža: -44 pixelov dole, -50 pixelov vľavo Vlastné polstrovanie: 10 pixelov zhora, 2 pixely dole, 15 pixelov vľavo, 15 pixelov vpravo
Duplikujte sekciu a vytvorte viac návrhov úryvkov
To podporuje náš prvý dizajn kódovej schránky. Teraz musíme iba duplikovať časť obsahujúcu návrh bloku kódu a aktualizovať štítok a farby tak, aby sme vytvorili nový blok kódu pre iný kódovací jazyk. Toto je samozrejme voliteľné, ale ak plánujete na stránku pridať rôzne úryvky, pomôže vám mať pre každú inú farebnú schému.
Napríklad duplikujte časť a otvorte nastavenia modulu Blurb.
Aktualizujte názov pre Javascript na „js“.
Potom kliknite pravým tlačidlom myši na Farba obrázka / ikony a vyberte možnosť Nájsť a nahradiť.
Aktualizované možnosti vyhľadávania a výmeny:
V: tejto časti Nahradiť: [nová farba] Nahradiť všetko: začiarknite políčko nahradiť všetky nájdené hodnoty
Teraz máte nový blok úryvkov pre úryvky JS.
Tu je príklad úryvkov pre populárne typy kódov pre WordPress.
Pomocou pluginu Prettify Code môžete pridať zvýraznenie syntaxe do manuálnych útržkov kódu
Je pravda, že pomocou manuálnej metódy môžete text okamžite vložiť a odovzdať. Prettify Code plugin okamžite pridá zvýraznený kód do všetkých značiek „pred“. Krása tohto doplnku je, že sa nevyžaduje absolútne žiadne prispôsobenie. Musíte si iba stiahnuť a aktivovať plugin.
Tu je príklad toho, ako bude kód vyzerať s aktívnym predstieracím kódom.
Kód Prettify prichádza od spoločnosti Google a tiež sa používa na štylizáciu všetkých tých nádherných úryvkov stackoverflow.com.
Dokončiť
Prezeranie úryvkov kódu v Divi nemusí byť ťažké. Ručné pridanie úryvkov pomocou značiek kódu pre a Word poskytované WordPressom urobí prácu s väčšinou úryvkov iných ako html, ale úryvok musíte najskôr spustiť cez kódovač. html pre istotu. Štýl úryvku textu môžete ďalej prispôsobiť pomocou nastavení textového modulu. Nezabudnite na Code Prettify, ktorý zvýrazní vaše manuálne úryvky.
Pre tých z vás, ktorí pravidelne zdieľajú úryvky, je pravdepodobne najlepším riešením použitie doplnku SyntaxHighlighter. Či tak alebo onak, vždy budete mať možnosť pridať do svojich úryvkov viac kreatívnych návrhov pomocou nástroja Divi Builder.
Bonne šancu.
