# Syntax Highlighter widget

> Programkód megjelenítése nyelvfüggő színezéssel, sorszámokkal, kiemelt sorral és letöltőgombbal.

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.

![PHP-kód kiemelt sorral a nyilvános oldalon](./kepek/szovegek-adatok-kod.webp)

*PHP-kód kiemelt sorral a nyilvános oldalon* (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

![A Syntax Highlighter Options szakasza](./kepek/szovegek-adatok-kod-opciok-panel.webp)

*A Syntax Highlighter Options szakasza* (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.