# Kód blokk

> Kódrészletek megjelenítése az oldalon: beszúrás, eszköztár, átalakítás és a blokk beállításai.

A **Kód** blokkal kódrészleteket jeleníthetsz meg a látogatóknak. A szöveg egyenközű (monospace) betűtípussal, a szóközök és a tabulálás megtartásával látszik. Például:

```text
if ( feltétel ) {
    muvelet1();
    muvelet2();
} else {
    alapmuvelet();
}
```

## A blokk hozzáadása

Kattints a bal felső sarokban a **+** (blokkbeszúró) gombra, keress rá a **Kód** blokkra a keresőmezőben, és kattints rá. Gyorsabb módszer: írd be egy új sorban, hogy `/kód` (vagy `/code`), és nyomj entert.

![A Kód blokk kijelölve: az eszköztár és a Blokk fül](./kepek/blokkok-kod-szerkeszto.webp)

*A Kód blokk kijelölve: az eszköztár és a Blokk fül* (https://minta-bolt.hu/wp-admin/post.php?post=16&action=edit)

A képen a kijelölt Kód blokk látszik az eszköztárával, jobbra a **Betűkészlet**, **Háttér**, **Méretek**, **Keret** és **Haladó** panelekkel.

## A Kód blokk eszköztára

Az eszköztár gombjai: **Kód** (átalakítás), **Húzás**, **Mozgatás fel** és **Mozgatás le**, **Igazít** és **Beállítások** (három pont). Ha szövegrészt jelölsz ki a blokkban, a szövegformázó gombok is megjelenhetnek: **Félkövér**, **Dőlt**, **Link** és a **További** menü.

### Átalakítás

A **Kód** gombbal a blokk tartalmát átalakíthatod Bekezdéssé, Oszlopokká, Csoporttá, Egyéni HTML-lé vagy Előreformázott szöveggé. Ha a kódot Csoporttá alakítod, a csoport hátterének színét megváltoztathatod, így a kód mögötti háttér más színű lehet.

### Húzás és mozgatás

A pontokkal jelölt **Húzás** gombbal a blokkot a kívánt helyre húzhatod, a **Mozgatás fel** és **Mozgatás le** nyilakkal pedig egy lépéssel feljebb vagy lejjebb viheted.

### Igazítás

Az **Igazít** gombbal a blokk szélességét választhatod meg: **Nincs** (a blokk igazítása nem változik) vagy **Széles** (a blokk a tartalom szélességénél szélesebb lesz).

### Félkövér, dőlt és link

Jelöld ki a kód egy részét, és használd a **Félkövér** gombot (`Ctrl+B`, Macen `Cmd+B`) vagy a **Dőlt** gombot (`Ctrl+I`, Macen `Cmd+I`). A **Link** gombbal a kijelölt szövegre hivatkozást tehetsz. A **További** menü további formázásokat tartalmaz, például kiemelést, soron belüli kódot és áthúzást.

### Beállítások (három pont)

A három pontos menüből másolhatod, kettőzheted, törölheted a blokkot, vagy HTML-ként szerkesztheted.

## A Blokk fül beállításai

Az oldalsáv **Blokk** fülét a **Beállítások** gombbal nyithatod meg a **Közzététel** gomb mellett.

| Panel | Mit állíthatsz |
|---|---|
| **Betűkészlet** | A szöveg színe, a betűméret és a további tipográfiai beállítások (például megjelenés, sormagasság, betűköz). |
| **Háttér** | A blokk háttere: szín vagy színátmenet. |
| **Méretek** | Helykitöltés (belső margó) és margó (külső távolság). |
| **Keret** | A szegély színe, vastagsága és lekerekítése. |
| **Haladó** | HTML-horgony, további CSS-osztályok, további CSS és stílusok. |