Syntax Highlighter widget

A Syntax Highlighter programkódot jelenít meg nyelvfüggő színezéssel (a színezést a Prism.js végzi). Az ingyenes bővítményben van; használat előtt kapcsold be a The Plus Addons → Widgets oldalon.

Figyelem

A widget elavult (DEPRECATED jelvény látszik a Widgets oldalon és a szerkesztő panelen is). A már használatban lévő példányok tovább működnek, de a gyártó nem fejleszti tovább, ezért új oldalakat ne erre építsd. Helyettesítő widgetet a bővítmény nem nevez meg.

https://minta-bolt.hu/tp-kod/

A kép egy PHP-kódblokkot mutat Okaidia témával; a harmadik sor halványabban kiemelt háttérrel látszik.

Tartalom fül

A Source Code szakasz beállításai:

Beállítás	Mit csinál	Alapérték
Language	A programnyelv, amelynek szabályai szerint a kód színeződik (például HTML Markup, CSS, Javascript, Php, Python, SQL, Json)	HTML Markup
Theme	A színtéma: Default, Coy, Dark, Funky, Okaidia, Solarized Light, Tomorrow, Twilight	Default
Source Code	A megjelenítendő kód	mintaüzenet
Alignment	A kód igazítása a blokkon belül	Left

Options szakasz

https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor

Beállítás	Mit csinál	Alapérték
Language Text	A nyelvet megnevező felirat, például „HTML”	üres
Copy Text, Copied Text, Copy Error Text	A másolás gomb három állapotának felirata	Copy, Copied!, Error
Copy Icon, Copied Icon	A másolás gomb ikonjai
Line Number	Sorszámok a kód bal szélén	ki
Line Highlight	Megadja, mely sorok legyenek kiemelve	üres
Download Button	Letöltés gomb a kódhoz	ki

A Style fülön külön szakasz van a kódblokknak, a sorszámnak (szín, szegély), a kiemelt sornak és a nyelvfeliratnak.

Egy adott sor kiemelése

A Line Highlight egyetlen szövegmező az Options szakaszban. A mezőben látható minta: Ex: 1,2,3,4-15, vagyis vesszővel elválasztott sorszámokat és tartományt is megadhatsz.

1. Add hozzá a Syntax Highlighter widgetet, és írd be a kódot a Source Code mezőbe.
2. Nyisd meg az Options szakaszt, és keresd meg a Line Highlight mezőt.
3. Írd be a kiemelendő sorok számát, például 3.
4. A Style → Line Highlight szakaszban állítsd be a kiemelés színét vagy színátmenetét, ha az alapérték nem megfelelő.
5. Tedd közzé az oldalt, és nézd meg a nyilvános oldalon.

Ha egyik sor sem lesz kiemelve, ellenőrizd, hogy a mezőnek van értéke, és hogy a Style → Line Highlight színe nem egyezik a kódblokk saját hátterével. A Style → Line Highlight szakasz csak akkor látszik, ha a mező nem üres.

Letöltés gomb

A Download Button lehetővé teszi, hogy az olvasó fájlként mentse el a kódot, a mindig látható másolás gomb mellett.

1. Add hozzá a Syntax Highlighter widgetet, és nyisd meg az Options szakaszt.
2. Kapcsold be a Download Button kapcsolót.
3. Állítsd be a gomb Text feliratát (alapérték: Download) és az Icon ikont.
4. A Link mezőbe írd be a letöltendő fájl címét, ha a gomb egy konkrét fájlt töltsön le.
5. Tedd közzé az oldalt, és nézd meg a nyilvános oldalon.

Ha a gomb nem jelenik meg, ellenőrizd, hogy a Download Button be van kapcsolva: alapból ki van kapcsolva, és független a másolás gombtól.

Hibaelhárítás

• A kód nem színeződik: ellenőrizd, hogy a widget be van kapcsolva a The Plus Addons → Widgets oldalon, és hogy a Language egyezik a beillesztett kód nyelvével.