Pokud nabídnete jakýkoli softwarový nebo programovací tip, určitě budete chtít sdílet fragmenty kódu. Tento způsob sdílení fragmentů kódu jim může pomoci rychle připravit praxi. Ve výchozím nastavení však není možné sdílet kód se všemi potřebnými formáty. Co mám na mysli při formátování, je zvýraznění syntaxe. Přesto je to něco docela snadného.

Naštěstí, pokud používáte divi, měli byste vědět, že existuje vestavěný způsob, jak to udělat ručně, a přidat do těchto úryvků kódu vlastní styly. Kromě toho existují pluginy a ressources aplikace třetích stran, které mohou skutečně zjednodušit proces vytváření krásných a funkčních úryvků v Divi.

V tomto tutoriálu vám ukážu, jak sdílet fragmenty kódu v Divi (ručně). A také vám ukážu, jak navrhovat bloky úryvků pomocí nástroje Divi Builder, který vás přenese na další úroveň.

přehled

Zde je přehled návrhů úryvků možných v tomto kurzu.

Krabice s úryvky kódu s fragmenty kódu přidaly manuální režim.

Náhled kódu možný s diviPředpoklady pro výuku

Pro tento tutoriál potřebujete pouze Divi téma, nainstalované a aktivní. Ukázkové úryvky kódu vytvoříme od začátku pomocí Divi Builderu na nové stránce.

Chcete-li začít, vytvořte novou stránku a nasaďte Divi Builder na veřejném rozhraní. Poté vyberte možnost „Vytvořit od začátku“.

Nyní jste připraveni jít!

Návrh personalizovaného boxu na fragmenty kódu v Divi

Vzhledem k tomu, že náš fragment kódu je umístěn v textovém modulu, můžeme pomocí nástroje pro tvorbu divi přidat textové prvky do textového modulu (a kolem něj). U tohoto návrhu použijeme souhrnný modul, který bude sloužit jako štítek pro úryvek. Dále upravíme styl a umístíme kurzor nalevo od textového modulu. Dále vytvoříme styl textového modulu našeho fragmentu.

Vytvoření sekce, řádku a sloupce

Nejprve musíme vytvořit novou sekci s řádkem sloupce.

Sloupec má řádek divi

Poté aktualizujte parametry řádku následujícím způsobem:

Šířka okapu: 1
Vlastní výplň: 0px nahoře, 0px dole

Upravit parametr divi linePřidejte textový modul

Poté do řádku přidejte textový modul.

Textový modul Divi 1Můžete opustit obsah ve výchozím stavu. Později do něj přidáme naše úryvky kódu WordPress. Nyní pojďme modelovat textový modul aktualizací následujících parametrů textu:

Barva pozadí: # eff0f1 Barva textu: # 000000 Vlastní okraj: 60 pixelů vlevo Vlastní polstrování: 3% nahoře, 3% dole, 3% vlevo, 3% vpravo

Nastavení parametrů textového modulu Divi

Šířka horního okraje: 10 pixelů Barva horního okraje: # 7cda24

Nastavení ohraničení textuVytváření štítku úryvku

K vytvoření popisku fragmentu použijeme modul reklamy. To vám umožní přidat zobrazenou ikonu textu (nebo ikonu vlastního obrázku) vedle zobrazeného jazyka kódu.

Vytvořte prezentační modul a přetáhněte jej nad textový modul. Poté aktualizujte následující nastavení prezentace:

Název: css Obsah: [odstranit fiktivní obsah] Ikona použití: ANO Ikona: viz snímek obrazovky

Modifikovaný textový modul diviPoté aktualizujte návrhové parametry následujícím způsobem:

Barva pozadí: # 1b2426 Barva ikony: # 7cda24 Umístění obrázku / ikony: vlevo Velikost písma: 20px Barva názvu textu: #ffffff Název velikosti textu: 16px

Blurb divi nastavení modulu

Výška nadpisu: 1.3em Šířka: 100px Vlastní okraj: -44px dole, -50px vlevo Vlastní polstrování: 10px nahoře, 2px dole, 15px vlevo, 15px vpravo

Nastavení modulu reklamy CSS

Duplikujte sekci a vytvořte více návrhů úryvků

To podporuje náš první design kódové schránky. Nyní musíme pouze duplikovat část obsahující design bloku kódu a aktualizovat štítek a barvy, abychom vytvořili nový blok kódu pro jiný kódovací jazyk. To je samozřejmě volitelné, ale pokud plánujete na stránku přidat různé úryvky, pomůže to mít pro každou jinou barevnou schéma.

Například duplikujte sekci a otevřete nastavení modulu Blurb.

Aktualizujte název pro Javascript na „js“.

Poté klikněte pravým tlačítkem na Barva obrázku / ikony a vyberte Najít a nahradit.

Duplikujte divi sekciAktualizované možnosti vyhledávání a nahrazování:

V: tato část Nahradit: [nová barva] Nahradit vše: zaškrtněte nahradit všechny nalezené hodnoty

Nyní máte nový blok úryvků pro úryvky JS.

Zde je příklad úryvků pro populární typy kódů pro WordPress.

Přidejte fragmenty kódu diviPomocí pluginu Prettify Code přidáte zvýraznění syntaxe do ručního kódu

Je pravda, že pomocí ruční metody můžete text okamžitě vložit a předat. Prettify Code plugin okamžitě přidá zvýrazněný kód do všech značek „pre“. Krása tohoto pluginu spočívá v tom, že není nutné žádné přizpůsobení. Vše, co musíte udělat, je stáhnout a aktivovat plugin.

Zde je příklad, jak bude kód vypadat s aktivním kódem Prettify.

Prettfy kód v akciKód Prettify přichází od společnosti Google a také se používá ke stylizaci všech těch úžasných úryvků stackoverflow.com.

Dokončete

Prohlížení fragmentů kódu v Divi nemusí být obtížné. Ruční přidání úryvků pomocí značek kódu pre a Word poskytovaných WordPressem udělá práci pro většinu úryvků jiných než html, ale nejdříve musíte spustit úryvek prostřednictvím kodéru. html pro jistotu. Navíc můžete dále přizpůsobit styl textu fragmentu pomocí nastavení textového modulu. A nezapomeňte na Code Prettify a zvýrazněte své ruční úryvky.

Pro ty z vás, kteří pravidelně sdílejí úryvky, je pravděpodobně nejlepším řešením použití pluginu SyntaxHighlighter. Ať tak či onak, vždy budete mít možnost přidat do svých úryvků více kreativních návrhů pomocí nástroje Divi Builder.

Bonne šanci.