Téměř všichni blogeři, tvůrci obsah nebo vývojáři technologií někdy potřebují na svém blogu zobrazit zvýrazněné úryvky kódu. To může být samo o sobě bolest hlavy. Zvýraznění jednoho nebo více řádků v tomto fragmentu však může být také nutné a tato funkce bohužel není součástí většiny integrací kódu. Naštěstí existuje plugin SyntaxHighlighter Evolved. Ukážeme vám, jak jej používat, aby byl kód co nejčistší a čitelný.

Vyvinul se SyntaxHighlighter

Zvýrazňovač syntaxe

Instalace a aktivace pluginu je jednoduchá. Najdete jej v úložišti pluginů WP.org ale ujistěte se, že je to dobře provedeno Alex Mills (Viper007Bond), protože ve skutečnosti existuje mnoho výsledků. Víme však, že tento je spolehlivý a aktuální. Kromě toho přichází se specializovaným blokem pro editor Gutenberg. Nemluvě o řadě parametrů, které vám umožňují přizpůsobit vaše zkušenosti, což z něj činí naši volbu pro tento typ úkolu.

Plugin zvýrazňovače syntaxe wordpress

V nabídce Parametry na hlavním panelu WordPress najdete novou položku s názvem SyntaxHighlighter . Pokračujte a klikněte na něj. Zde můžete upravit každou maličkost, kterou budete potřebovat pro vložení úryvků na váš web WordPress.

Nastavení Syntaxe zvýrazňovače

Stránka nastavení pluginu je poměrně jednoduchá. Jedním konkrétním prvkem, který se nám na tomto pluginu líbí, je to, že získáte velké množství přizpůsobení ohledně toho, jak se kód zobrazuje na vašem webu. Do vložení můžete přidat třídy CSS, upravit odsazení čísel řádků, vybrat témata barvu, použijte chytré tabulátory a zalomení řádků a rozhodněte, jak se načte zvýraznění jednotlivých kódovacích jazyků na celém webu.

Konfigurace zvýrazňovače syntaxe

Chceme definovat tři konkrétní parametry, které by většina lidí měla vědět.

Verze pluginu, čísla řádků a velikosti karet

První je, kterou verzi pluginu načítáte. Ačkoli modul plug-in zůstává v úložišti aktuální, můžete si vybrat mezi verzí plug-inu 2.x a 3.x , podle toho, jak chcete zobrazit svůj kód. Oba jsou zabezpečené, každý však nabízí specifické funkce, které ten druhý v době psaní tohoto článku nenabízí.

Pokud uživatelé zkopírují váš kód, je to nejdůležitější, udělá to verze 3.x. Pokud je však váš pro zobrazení užitečnější než skutečný nástroj, pak pro vás může být nový řádek ve verzi 2.x lepší, protože eliminuje potřebu používat posuvníky. pro velké fragmenty kódu.

Pak musíte ukázat nebo ne čísla řádků. Pro velké bloky kódu a výukové programy jsou čísla řádků neocenitelná. Pokud však máte krátké úryvky, není nutné je trvale označovat jako řádky 1 a 2. Jejich odebrání může výrazně zlepšit vzhled kódu.

A pak je tu velikost záložky stále kontroverzní. Výchozí možnost je 4, ale můžete ji změnit na libovolné číslo, které chcete. Včetně správné hodnoty 2. (Ano, uvědomujeme si, že neexistuje správná hodnota. Pro karty se nám líbí 2 mezery.)

Váš kód a krátké kódy

Pokud přejdete do dolní části stránky Parametry , uvidíte velký náhled kódu, stejně jako velké množství parametrů zkráceného kódu. Váš čas by bylo dobré strávit jejich procházením, jen abyste zjistili, co všechno může plugin udělat, aby ukázal vaše úryvky. Rovněž se zde projeví všechny změny, které jste provedli výše v zobrazení kódu v nastavení výše. Po změně kterékoli z možností nezapomeňte stisknout tlačítko Uložit.

Viz úpravy divi syntaxhighliter

I když někteří lidé nemusí být největšími fanoušky zkrácených kódů, protože vás mohou propojit s určitými doplňky, myslíme si, že se vyplatí je použít, protože jsou chytré a snadno zapamatovatelné. Pokud nic jiného, ​​musíte si pamatovat dvě věci a pak vám plugin bude fungovat nejlépe.

ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>

Nebo nějaké variace. Pokud si pamatujete, jste si jisti různými věcmi, které s tímto pluginem můžete dělat. I když můžete použít dlouhý identifikátor, plugin SyntaxHighlighter je postaven dostatečně dobře, aby zjednodušil vaši práci.

Použijte krátké kódy

Kdekoli můžete vykreslit krátký kód, můžete je použít. v divi nebo klasický editor, můžete použít Textový modul nebo TinyMCE editor a kód pouze vložit mezi krátké kódy. Vzhledem k tomu, jak funguje karta Vizuální, doporučujeme používat kartu Texty zachovat tyto speciální znaky formátování.

Parametr textu Divi

Jste-li uživatelem editoru Gutenberg / Block, věci jsou tak jednoduché. K tomu můžete opět použít textový blok. Ještě jednodušší je vlastní blok HTML. Jak je uvedeno výše, vložte kód do značek krátkého kódu.

Blokovat html gutenberg divi

Ještě lépe, blok SyntaxHighlighter Evolved je sám o sobě. Instalace zásuvného modulu zahrnuje vlastní Gutenbergův blok; takže pokud nejste zkráceným kódem a nechcete se pokazit s nastavením, nemusíte. Stačí najít blok pod formátování a vložte ji do své zprávy nebo stránky.

Syntaxe Highliter Gutenberg

Bez ohledu na to, jak vložíte kód, na předním konci vašeho webu WordPress uvidíte stejné vykreslení.

Shrnout

Možná budete muset prezentovat úryvky svému publiku z mnoha důvodů. Možná píšete návody nebo zveřejníte řešení běžných problémů, které si diváci mohou vzít a použít, jak chtějí? Ale někdy integrace GitHub prostě neposkytuje druh zážitku, který chcete svým uživatelům. To je, když potřebujete plugin jako SyntaxHighlighter Evolved. 

Pouhými několika kliknutími, s malým přizpůsobením a Gutenbergovým blokem nebo krátkým kódem, vaše publikum prozkoumá váš kód bez problémů.