Ukážka formátovania článku

Interný koncept so všetkými prvkami, ktoré blog vie vykresliť. Nadpisy, zoznamy, citát, kód, tabuľka a obrázok s popisom.

Martin VančoMartin Vančo
1 min. čítania

Tento článok je koncept a na produkcii sa nezobrazí. Slúži na kontrolu, ako blog vykresľuje jednotlivé prvky Markdownu. Nemá obálku, takže archív aj stránka článku ju vygenerujú z názvu, kategórie a autora.

Odseky a riadkový text

Bežný odsek s tučným textom, kurzívou a riadkovým kódom ako {meno_1} alebo npm run dev. Odkazy fungujú na stránky webu aj von z webu; tie druhé sa otvoria v novom okne.

Ďalší odsek, aby bolo vidieť rozstup medzi odsekmi. Slovenské úvodzovky „takto“ a pomlčka – takto – sa píšu priamo v texte.

Nadpis tretej úrovne

Podnadpis sa v obsahu článku zobrazí ako odsadená položka.

Nadpis štvrtej úrovne

Štvrtá úroveň sa do obsahu nedostane, v texte však ostáva.

Zoznamy

Odrážkový zoznam:

  • Prvá položka
  • Druhá položka s kódom
  • Tretia položka
    • vnorená položka
    • ďalšia vnorená položka

Číslovaný zoznam:

  1. Otvorte nastavenia rozšírenia.
  2. Vyberte mód zakrývania.
  3. Uložte zmeny.

Citát

Aj pri existencii súhlasu alebo zmluvy o spracovaní osobných údajov sa odporúča údaje pred vložením anonymizovať alebo pseudonymizovať.

— Metodické usmernenie P SAK k Uzneseniu č. 12/4/2025, čl. 3 ods. 5

Posledný riadok citátu v kurzíve sa vykreslí ako zdroj.

Kód

Blok kódu s názvom súboru a zvýraznenými riadkami:

content.config.ts
export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'blog/*.md',
    }),
  },
})

Bez názvu súboru sa v lište zobrazí jazyk:

bash
curl -s https://blackpen.sk/llms.txt | head -20
json
{
  "text": "Klient {meno_1} {priezvisko_1} žiada odklad.",
  "entities": [
    { "token": "{meno_1}", "type": "meno" },
    { "token": "{priezvisko_1}", "type": "priezvisko" }
  ]
}

Tabuľka

PrvokAko sa píšePoznámka
Nadpis## Textdruhá a tretia úroveň idú do obsahu
Kód```ts [súbor] {2-3}názov súboru a riadky sú voliteľné
Obrázok![alt](/media/blog/x.jpg "Popis")popis v úvodzovkách sa zobrazí pod obrázkom

Široké tabuľky sa na úzkych obrazovkách posúvajú do strany.

Obrázok

Pole správy v ChatGPT s tromi zakrytými hodnotamiPole správy s tromi zakrytými hodnotami, ako ho vidí používateľ pred odoslaním.

Obrázky v texte majú 1440x810 px (JPEG), šablóna je v product-shots.


Vodorovná čiara oddeľuje časti, ktoré nepotrebujú vlastný nadpis. Koniec ukážky.

Martin VančoMartin VančoUI/UX & Product Manager

Ďalšie články