Referenční stránka – formátování a komponenty
Obsah
- Nadpisy
- Formátování textu
- Admonitions (výzvy)
- Seznamy
- Tabulka
- Odkaz a obrázek
- Kódový blok
- Skrývací blok (Details)
- Matematika – KaTeX
- Indexy v textu – HTML tagy
- Oddělovač
- Komponenta LevelSection
- Komponenta LevelIndicator
- Poznámky k frontmatter
Nadpisy
# H1 – Nadpis stránky (jen jeden na stránce, z frontmatter title nebo ručně)
## H2 – Hlavní sekce
### H3 – Podsekce
#### H4 – Hlubší úroveň (používej střídmě)
H1 – Největší nadpis
H2 – Hlavní sekce
H3 – Podsekce
H4 – Hlubší úroveň
Formátování textu
**tučně**
_kurzíva_
~~přeškrtnuté~~
`inline kód`
**tučně a _vnořená kurzíva_**
tučně — pro důležité hodnoty, klíčové pojmy a první výskyt termínu
kurzíva — pro názvy knih, jemný důraz nebo cizí slova
přeškrtnuté — pro text, který záměrně zastaráváš nebo opravuješ
inline kód — pro příkazy, názvy součástek, kódové výrazy, hodnoty jako 470 Ω, 5 V
tučně a vnořená kurzíva — kombinace funguje
Admonitions (výzvy)
Jeden vlastní typ (:::ukol) + výchozí Docusaurus typy. :::note povinně začíná každou vyšší <LevelSection>.
Neutrální doplněk. Povinný úvod každé <LevelSection level={2}> a <LevelSection level={3}>.
Zadání úkolu nebo cvičení pro studenta — oranžová, projektová barva EduBoard.
Jakýkoliv :::ukol může mít vlastní nadpis za typem.
Výchozí Docusaurus tip (zelená).
Výchozí Docusaurus info (modrá).
Riziko poškození nebo nebezpečí. Vždy uveď konkrétní důsledek.
Syntaxe
:::ukol
Zadání úkolu nebo cvičení.
:::
:::ukol[Vlastní nadpis]
Úkol s vlastním nadpisem.
:::
:::note
Neutrální doplněk nebo úvod sekce.
:::
:::tip
Tip nebo doporučení (zelená, Docusaurus default).
:::
:::info
Zajímavý kontext nebo fyzikální vysvětlení.
:::
:::danger
Bez rezistoru LED shoří. Rezistor je nutný vždy.
:::
Seznamy
Odrážkový seznam (unordered list)
- První položka
- Druhá položka
- Vnořená položka (2 mezery + pomlčka)
- Další vnořená
- Třetí položka
- První položka
- Druhá položka
- Vnořená položka
- Další vnořená
- Třetí položka
Číslovaný seznam (ordered list)
1. První krok
2. Druhý krok
3. Třetí krok
- První krok
- Druhý krok
- Třetí krok
Tabulka
| Sloupec A | Sloupec B | Sloupec C |
|-----------|-----------|-----------|
| hodnota 1 | hodnota 2 | hodnota 3 |
| **tučně** | _kurzíva_ | `kód` |
| Sloupec A | Sloupec B | Sloupec C |
|---|---|---|
| hodnota 1 | hodnota 2 | hodnota 3 |
| tučně | kurzíva | kód |
Zarovnání sloupců
| Vlevo | Na střed | Vpravo |
|:-------|:--------:|-------:|
| text | text | text |
| Vlevo | Na střed | Vpravo |
|---|---|---|
| text | text | text |
Odkaz a obrázek
Odkaz
[Zobrazený text](./basic/01.md) – interní odkaz (relativní cesta)
[Zobrazený text](/docs/basic/01) – interní odkaz (absolutní URL)
[Zobrazený text](https://rajlab.cz) – externí odkaz
Deska 01 – Elektrický obvod — příklad interního odkazu
Obrázek
Obrázky vkládej vždy standardním markdown zápisem — bez HTML tagů, bez CSS tříd přímo v .md.
Globální styly v custom.css se postarají o drop-shadow v light mode a čistý kontrast v dark mode automaticky.
Kódový blok
Fenced code blok se třemi zpětnými apostrofy a názvem jazyka:
```javascript
const x = 42;
console.log(x);
```
const x = 42;
console.log(x);
def ohm(u, r):
return u / r
proud = ohm(5, 470)
print(f"{proud * 1000:.1f} mA")
npm start
npm run build
Blok bez zvýraznění – žádný jazyk za ```.
Nejčastěji použitelné identifikátory: javascript, typescript, python, bash, css, html, markdown, json, c, cpp
Rovnice a vzorce piš vždy v KaTeX ($...$ nebo $$...$$), nikdy do ``` code bloku.
Skrývací blok (Details)
HTML element <details> se skrytým obsahem, který čtenář rozbalí kliknutím:
<details>
<summary>Klikni pro rozbalení</summary>
Obsah, který se zobrazí po kliknutí. Může obsahovat **markdown**, tabulky, seznamy.
</details>
Součástky na desce
- Rezistor R1 (470 Ω) — omezuje proud, chrání LED
- LED1 — svítí, když přes ni teče proud
- Tlačítko SW1 — spíná obvod
Technické detaily (příklad delšího obsahu)
Prázdný řádek za <summary> je nutný, aby Docusaurus správně zpracoval markdown uvnitř bloku.
| Veličina | Hodnota |
|---|---|
| Napájení | 5 V |
| Proud | 6,4 mA |
Matematika – KaTeX
Matematické výrazy se píší v KaTeX syntaxi — nikdy do code bloku.
Inline rovnice (v textu)
Proud $I = 6{,}4\,\text{mA}$ teče rezistorem.
Proud teče rezistorem.
Bloková rovnice (samostatný řádek)
$$I = \frac{U}{R} = \frac{5}{470} \approx 0{,}0106\,\text{A}$$
Více bloků pod sebou
Složitější výrazy
$$E_{\text{foton}} = \dfrac{h \cdot c}{\lambda}$$
Pravidla pro KaTeX v češtině
| Situace | Správně | Špatně |
|---|---|---|
| Desetinná čárka | 6{,}4 → | 6.4 → (anglická tečka) |
| Mezera před jednotkou | 5\,\text{V} → | 5V → |
| Textové slovo v rovnici | \text{mA} | mA (zobrazí se jinak) |
| Zlomek | \frac{a}{b} nebo \dfrac{a}{b} | — |
| Dolní index | I_{f} | — |
| Horní index | 10^{-3} | — |
Indexy v textu – HTML tagy
Dolní a horní indexy v running textu (mimo KaTeX rovnice) se píší HTML tagy:
U<sub>R1</sub> – dolní index
I<sub>C</sub> – dolní index
10<sup>−15</sup> – horní index
Al<sub>2</sub>O<sub>3</sub> – chemický vzorec
Výsledek: UR1, IC, 10−15, Al2O3
U_R1 nebo U₁ v running textu nepoužívej — markdown to nezpracuje jako index.
Oddělovač
---
Vodorovná linka --- se používá pro oddělení sekce zapojení od LevelSection bloků, nebo pro výrazné oddělení tematických celků.
Komponenta LevelSection
LevelSection je vlastní React komponenta, která vizuálně označuje úroveň náročnosti obsahu barevnými puntíky.
Import (na začátek každé desky)
import LevelSection from '@site/src/components/LevelSection';
Použití
<LevelSection level={1}>
Obsah první úrovně.
</LevelSection>
<LevelSection level={2}>
:::note[Navazuje na první sekci]
Jedna věta co navazuje.
:::
Obsah druhé úrovně.
</LevelSection>
<LevelSection level={3}>
:::note[Navazuje na obě předchozí sekce]
Jedna věta co navazuje.
:::
Obsah třetí úrovně.
</LevelSection>
Pravidla pro LevelSection
- Tři sekce jsou povinné na každé desce
- Každá vyšší sekce začíná
:::note Navazuje na ...admonition - JSX tagy musí být na column 0 — žádné odsazení před
<LevelSection>ani</LevelSection>
Jak to vypadá živě
Tato sekce je označena jako úroveň 1 — jeden aktivní puntík. Vhodná od základní školy, bez vzorců.
Víš, co to je. Teď si ukážeme proč.
Tato sekce je označena jako úroveň 2 — dva aktivní puntíky. Vhodná od střední školy.
Máš kontext a principy. Teď jdeme na fyziku.
Tato sekce je označena jako úroveň 3 — tři aktivní puntíky. Pro vysokoškolský nebo učitelský pohled.
Komponenta LevelIndicator
LevelIndicator je inline verze indikátoru úrovně — zobrazuje puntíky přímo v textu (např. v tabulce na úvodní stránce).
Import komponenty
import LevelIndicator from '@site/src/components/LevelIndicator';
Použití v textu
<LevelIndicator level={1} />
<LevelIndicator level={2} />
<LevelIndicator level={3} />
Výsledek:
Poznámky k frontmatter
Každá stránka začíná YAML frontmatter blokem mezi ---:
---
id: "01"
title: 01 – Název desky
description: Krátký popis pro SEO a náhled (zobrazí se v metaznačkách).
sidebar_position: 2
---
| Pole | Povinné | Poznámka |
|---|---|---|
id | ano | Vždy v uvozovkách — bez nich YAML parsuje 01 jako oktál a ID se rozbije |
title | ano | Zobrazí se v záložce prohlížeče a v sidebaru |
description | doporučeno | Pro SEO a případný náhled sdíleného odkazu |
sidebar_position | ne | Pořadí určuje sidebars.js, toto pole nepotřebuješ |
Rychlý tahák
| Co chceš | Syntaxe |
|---|---|
| Tučný text | **text** |
| Kurzíva | _text_ |
| Inline kód | `kód` |
| Odkaz | [text](./cesta.md) |
| Obrázek |  |
| Blockquote / perex | > text |
| Oddělovač | --- |
| Admonition | :::ukol, :::note, :::tip, :::info, :::danger |
| Code blok | ```javascript … ``` |
| Skrývací blok | <details><summary>…</summary> |
| Inline rovnice | $I = U/R$ |
| Bloková rovnice | $$I = U/R$$ |
| Dolní index v textu | U<sub>R1</sub> |
| Horní index v textu | 10<sup>3</sup> |
| LevelSection | <LevelSection level={1}>…</LevelSection> |
| LevelIndicator | <LevelIndicator level={1} /> |
| Admonition s nadpisem | :::ukol Vlastní nadpis |