Szinte az összes blogger, alkotója tartalom vagy a technológiafejlesztőknek néha kiemelt kódrészleteket kell megjeleníteniük a blogjukon. Ez már önmagában is fejfájást okozhat. Szükséges lehet azonban egy vagy több sor kiemelése ebben a részletben, és ez a funkció sajnos nem része a legtöbb kódintegrációnak. Szerencsére létezik a SyntaxHighlighter Evolved bővítmény. Megmutatjuk, hogyan kell használni, hogy a kód a lehető legtisztább és olvashatóbb legyen.

A SyntaxHighlighter kifejlesztett

Szintaxis kiemelő

A beépülő modul telepítése és aktiválása egyszerű. Megtalálható a WP.org plugins lerakaton de ügyelj arra, hogy jól csinálja Alex Mills (Viper007Bond), mert valóban sok eredmény van. Tudjuk azonban, hogy ez megbízható és naprakész. Sőt, ez egy speciális blokk a Gutenberg szerkesztő számára. Nem is beszélve számos olyan paraméterről, amelyek lehetővé teszik a tapasztalatok személyre szabását, ami választásunkra teszi ezt a típusú feladatot.

Szintaxis kiemelő wordpress plugin

A menüben Paraméterek a WordPress irányítópultján talál egy új elemet, az úgynevezett SyntaxHighlighter . Menj előre, és kattints rá. Itt beállíthat minden apróságot, amire szüksége lesz a kódrészletek beágyazásához a WordPress webhelyére.

A SyntaxHighlighter beállításai

A beépülő modul beállítási oldala viszonylag egyszerű. Az egyik különleges elem, amit szeretünk ebben a beépülő modulban, hogy számos testreszabási lehetőséget kap a kód webhelyén való megjelenítésére vonatkozóan. Hozzáadhat CSS osztályokat a beágyazáshoz, módosíthatja a sorszám kitöltését, választhat témák színeket, használjon intelligens tabulátorokat és sortöréseket, és döntse el, hogy az egyes webhelyszintű kódolási nyelvek kiemelése hogyan töltődik be.

Syntaxhighlighter konfiguráció

Három olyan paramétert akarunk meghatározni, amelyeket a legtöbb embernek tudnia kell.

Beépülő verzió, sorszámok és fülméretek

Az első a beépülő modul melyik verzióját tölti be. Bár a beépülő modul naprakész marad az adattárban, választhat a beépülő modul 2.x és 3.x verziói közül , attól függően, hogy hogyan szeretné megjeleníteni a kódot. Mindkettő biztonságos, azonban mindegyik olyan sajátosságokat kínál, amelyeket a másik nem (az írás idején).

Ha a felhasználók a kódodat másolják a legfontosabb, akkor a 3.x verzió is megfelel. Ha azonban a tiéd hasznosabb a megjelenítéshez, mint a tényleges segédprogram, akkor a 2.x változat új vonala jobb lehet az Ön számára, mivel így nincs szükség görgetősávok használatára. nagy kódrészletekhez.

Ezután meg kell mutatnia a sorszámokat, vagy sem. Nagy kóddarabok és oktatóanyagok esetén a sorszámok felbecsülhetetlenek. Ha azonban rövid kivonatok vannak, nem szükséges őket véglegesen az 1. és a 2. sornak címkézni. Eltávolításuk jelentősen javíthatja a kód megjelenését.

És akkor ott van a fül mérete még mindig ellentmondásos. Az alapértelmezett opció 4, de tetszőleges számra módosíthatja. Beleértve a helyes 2 értéket. (Igen, rájövünk, hogy nincs helyes érték. Csak 2 szóközt szeretünk a fülekhez.)

Az Ön kódja és rövid kódjai

Ha az oldal aljára görget Paraméterek , nagy kódelőnézetet, valamint számos rövidkódparamétert fog látni. Idője jól telne azzal, hogy végigmegy rajtuk, csak azért, hogy lássa, mit tehet az összes beépülő modul a kivonatok bemutatásához. Ezenkívül a fenti beállításokban a fenti kódkijelzőn végrehajtott bármilyen változtatás itt is megjelenik. Tehát mindenképpen nyomja meg a Mentés gombot, miután megváltoztatta bármelyik lehetőséget.

Lásd a két szintaxishighliter módosítását

Bár egyesek nem biztos, hogy a rövid kódok legnagyobb rajongói, mert bizonyos pluginekhez kapcsolhatnak, úgy gondoljuk, hogy ezeket érdemes használni, mert okosak és könnyen megjegyezhetők. Ha mást nem, akkor két dologra kell emlékeznie, és akkor a plugin a legjobbat nyújtja az Ön számára.

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

Vagy néhány változatot. Ha emlékszik, magabiztos abban, hogy különféle dologgal tehet ezt a bővítményt. Noha hosszú azonosítót használhat, a SyntaxHighlighter plugin elég jól felépített, hogy egyszerűsítse a munkáját.

Használjon rövid kódokat

Bárhol, ahol le tud készíteni egy rövid kódot, használhatja őket. Ban ben Divi vagy a klasszikus szerkesztőt, használhatja a Szöveg modult vagy a TinyMCE szerkesztőt, és egyszerűen illessze be a kódot a rövid kódok közé. A Vizuális lap működése miatt javasoljuk a lap használatát szövegek hogy megőrizze ezeket a formázási speciális karaktereket.

Divi szövegparaméter

Ha Gutenberg / Block Editor felhasználó vagy, a dolgok ilyen egyszerűek. Ehhez ismét használhatja a szövegblokkot. Még egyszerűbb, az egyedi HTML blokk. A fenti módon illessze be a kódot a rövid kód címkékbe.

Blokkolja a html gutenberg divi

Még jobb, ha maga a SyntaxHighlighter Evolved blokk. A beépülő modul saját Gutenberg-blokkját tartalmazza; szóval, ha nem vagy rövid kód, és nem akarsz elrontani a beállításokkal, akkor nem kell. Csak keresse meg a blokkot formázás és illessze be az üzenetbe vagy az oldalba.

Szintaxis highliter gutenberg

Nem számít, hogyan illeszti be a kódot, ugyanazt a megjelenítést fogja látni a WordPress-webhely előlapján.

Összefoglalva

Számos okból lehet, hogy részleteket kell bemutatnia a közönség számára. Esetleg oktatóanyagokat ír vagy megoldásokat tesz közzé olyan gyakori problémákra, amelyeket a közönség tetszése szerint vehet és használhat? De néha a GitHub integráció egyszerűen nem nyújt olyan élményt, amilyet a felhasználók számára szeretne. Ekkor van szükség egy olyan pluginra, mint a SyntaxHighlighter Evolved. 

Néhány kattintással, kis testreszabással és Gutenberg blokkkal vagy rövid kóddal, a közönség probléma nélkül feltárja a kódját.