Takmer všetci blogeri, tvorcovia obsah alebo vývojári technológií niekedy potrebujú na svojom blogu zobraziť zvýraznené úryvky kódu. To môže byť samo o sebe bolesť hlavy. Zvýraznenie jedného alebo viacerých riadkov v tomto úryvku však môže byť tiež potrebné a táto funkcia bohužiaľ nie je súčasťou väčšiny integrácií kódu. Našťastie existuje doplnok SyntaxHighlighter Evolved. Ukážeme vám, ako ho použiť, aby bol kód čo najčistejší a čitateľný.
Vyvinul sa SyntaxHighlighter
Inštalácia a aktivácia pluginu je jednoduchá. Nájdete ho v úložisku doplnkov WP.org ale uistite sa, že je dobre vykonaná Alex Mills (Viper007Bond), pretože v skutočnosti existuje veľa výsledkov. Vieme však, že je spoľahlivý a aktuálny. Tento navyše obsahuje špecializovaný blok pre editora Gutenberg. Nehovoriac o niekoľkých parametroch, ktoré vám umožňujú prispôsobiť vaše skúsenosti, čo z neho robí našu voľbu pre tento typ úloh.
V ponuke Parametre na hlavnom paneli WordPress nájdete novú položku s názvom Zvýrazňovač Syntax . Len do toho a kliknite na to. Tam môžete upraviť každú maličkosť, ktorú budete potrebovať na vloženie úryvkov na svoju stránku WordPress.
Nastavenia SyntaxHighlighter
Stránka s nastaveniami doplnku je pomerne jednoduchá. Jedným konkrétnym prvkom, ktorý sa nám na tomto doplnku páči, je, že získate množstvo prispôsobení, pokiaľ ide o to, ako sa kód zobrazuje na vašom webe. Do vloženia môžete pridať triedy CSS, upraviť výplň čísel riadkov, vybrať si témy farbu, použite inteligentné karty a zalomenia riadkov a rozhodnite sa, ako sa načíta zvýraznenie jednotlivých kódovacích jazykov na celom webe.
Chceme definovať tri konkrétne parametre, ktoré by mala väčšina ľudí poznať.
Verzia doplnku, čísla riadkov a veľkosti kariet
Prvá je, ktorú verziu doplnku načítate. Aj keď doplnok zostáva v úložisku aktuálny, môžete si vybrať medzi verziou doplnku 2.x a 3.x , podľa toho, ako chcete zobraziť svoj kód. Oba sú zabezpečené, ale každý z nich ponúka špecifické funkcie, ktoré ten druhý v čase písania článku nemá.
Ak je najdôležitejšie, aby používatelia skopírovali váš kód, urobí to verzia 3.x. Ak je však váš na zobrazenie užitočnejší ako skutočný obslužný program, potom môže byť pre vás nový riadok vo verzii 2.x lepší, pretože odpadá nutnosť používať posúvače. pre veľké úryvky kódu.
Potom musíte alebo nemusíte zobraziť čísla riadkov. Pre veľké bloky kódu a výukových programov sú čísla riadkov neoceniteľné. Ak však máte krátke úryvky, nie je potrebné ich trvale označovať ako riadky 1 a 2. Ich odstránenie môže výrazne vylepšiť vzhľad kódu.
A potom je tu veľkosť záložky stále kontroverzné. Predvolená možnosť je 4, môžete ju však zmeniť na ľubovoľné číslo. Vrátane správnej hodnoty 2. (Áno, uvedomujeme si, že neexistuje správna hodnota. Pre karty sa nám páčia iba 2 medzery.)
Váš kód a krátke kódy
Ak sa posuniete do dolnej časti stránky Parametre , uvidíte ukážku veľkého kódu, ako aj veľké množstvo parametrov krátkeho kódu. Váš čas by ste strávili ich prechodom, len aby ste zistili, čo všetko môže doplnok urobiť, aby ukázal vaše úryvky. Tu sa prejavia aj všetky zmeny, ktoré ste vyššie vykonali v zobrazovaní kódu v nastaveniach vyššie. Po zmene niektorej z možností nezabudnite stlačiť tlačidlo uložiť.
Aj keď niektorí ľudia nemusia byť najväčšími fanúšikmi krátkych kódov, pretože vás môžu prepojiť s určitými doplnkami, myslíme si, že sa ich oplatí použiť, pretože sú inteligentné a ľahko zapamätateľné. Ak už nič iné, musíte si zapamätať dve veci a potom vám plugin bude pracovať čo najlepšie.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
Alebo niektoré variácie. Ak si pamätáte, ste si istí rôznymi vecami, ktoré môžete s týmto doplnkom urobiť. Aj keď môžete použiť dlhý identifikátor, doplnok SyntaxHighlighter je postavený dostatočne dobre na zjednodušenie práce.
Použite krátke kódy
Kdekoľvek môžete vykresliť krátky kód, môžete ho použiť. In divi alebo klasický editor, môžete použiť textový modul alebo editor TinyMCE a kód len vložiť medzi krátke kódy. Vzhľadom na to, ako funguje karta Vizuálne, odporúčame použiť kartu Texty zachovať tieto špeciálne znaky formátovania.
Ak ste používateľom editora Gutenberg / Block Editor, veci sú také jednoduché. Na to môžete opäť použiť textový blok. Ešte jednoduchšie je vlastný blok HTML. Ako je uvedené vyššie, vložte kód do značiek skráteného kódu.
Ešte lepšie je, že blok SyntaxHighlighter Evolved je sám o sebe. Inštalácia doplnku obsahuje vlastný blok Gutenberg; takže ak nie ste krátkym kódom a nechcete sa miešať s nastaveniami, nemusíte. Stačí nájsť blok pod formátovanie a vložte ju do svojej správy alebo stránky.
Bez ohľadu na to, ako vložíte kód, na prednej strane webu WordPress sa zobrazí rovnaké vykreslenie.
Aby som to zhrnul
Možno budete musieť svojmu publiku predložiť úryvky z mnohých dôvodov. Možno píšete návody alebo zverejňujete riešenia bežných problémov, ktoré si publikum môže vziať a použiť ho podľa seba? Integrácia GitHub však niekedy neposkytuje vašim používateľom taký zážitok, aký chcete. To je prípad, keď potrebujete doplnok ako SyntaxHighlighter Evolved.
Len niekoľkými kliknutiami s malým prispôsobením a Gutenbergovým blokom alebo krátkym kódom vaše publikum bez problémov preskúma váš kód.
