Stlačte "Enter" na preskočenie k obsahu

Markdown: značkovací jazyk pre riadenie vzhľadu článkov na webe

V súčasnosti sa veľká časť obsahu publikuje formou článkov na webových stránkach. Využívajú sa na to rôzne redakčné systémy. Najrozšírenejším je WordPress, ktorý nasledujú Drupal a Joomla, ale existujú aj iné. Pri tvorbe obsahu sa môžeme spoľahnúť na vstavané rozhranie systému alebo na niektorý z doplnkov, ktoré viac či menej spríjemňujú tvorbu obsahu. Jedným z takýchto doplnkov je aj editor jazyka Markdown.

Čo je to Markdown

Markdown je jednoduchý značkovací jazyk, ktorý umožňuje ľahkou formou v podobe jednoduchého textu štrukturovať obsah, vkladať odkazy či obrázky a podobne. Nakoľko ide o jednoduchý text, môžeme teda obsah tvoriť v ľubovoľnom textovom editore. Výsledok už iba prekopírujeme do redakčného systému a publikujeme.

Wikipédia o Markdown uvádza:

  • jazyk bol vytvorený v roku 2004 Johnom Gruberom ako jednoduchý značkovací jazyk pre prevod do valídneho xhtml alebo html;
  • pôvodne implementovaný v programovacom jazyku Perl, rozšíril sa však aj do jazykov PHP či Python;
  • používa sa pre poznámky na webe Github (súbory s príponou md);
  • populárny pre blogovanie kvôli jednoduchému vkladaniu odkazov a obrázkov;
  • niektoré redakčné systémy umožňujú jeho priame použitie;
  • umožňuje písanie kníh a poznámok v ktoromkoľvek textovom editore.

Vlastnosti jazyka

Markdown je jednoduchý, prehľadný a jeho syntax sa chová očakávane uvádza Wikipédia. Umožňuje kombinovať značky jazyka a značky xhtml tam, kde je to potrebné a nepostačuje samotný Markdown. Je dobre čitateľný ľudským okom a teda má aj menšiu pravdepodobnosť pozabudnutia na nejakú koncovú značku u párových príkazov a podobne. Zápis neobsahuje balast ako pri tvorbe v rôznych html editoroch.

Existujú aj rozšírenia syntaxe Markdown označované ako Markdown Extra, ktoré umožňujú napríklad definovať:

  • zoznamy;
  • id a class atribúty; tabuľky;
  • poznámky pod čiarou;
  • a podobne.

Formátovacie značky jazyka

Pre formátovanie obsahu sa používajú jednoduché značky.

V príkladoch nižšie uvádzame aj časti zápisu. Tie sú uzavreté medzi apostrofmi, ktoré samozrejme pri publikovaní nepoužijeme.

Ak chceme, aby sa formátovacia značka zobrazila vo výsledku a teda neuplatnila sa pri formátovaní, pred každý znak značky vložíme \ (opačné lomeno).

Uvádzame kompletný zoznam základných značiek a spôsobov formátovania, ktoré tvoria základ Markdown-u a sú dostupné v každom jeho výskyte. Markdown obsahuje aj rozšírenia, ktoré však nie sú dostupné všade. Pre ne je potrebné si overiť ich dostupnosť v konkrétnom použití. V popise nižšie uvádzame len niektoré z rozšírujúcich elementov. Kompletný zoznam nájdete v dokumentácii.

Nadpisy – štruktúrovanie textu

Nadpis je označený znakom # (hash, krížik). Na slovenskej klávesnici ho napíšeme kombináciou pravý Alt+x. Úroveň nadpisu určuje počet znakov hash.

Štruktúrovanie textu vytvárame postupným vnáraním úrovní nadpisov.

Príklad použitia: #Prvá kapitola ‚text‘ prvej kapitoly ##Podkapitola ‚text podkapitoly

Výsledok:

Prvá kapitola

text prvej kapitoly

Podkapitola

text podkapitoly

Odstavec

Odstavec vyrobíme vložením jedného alebo viacerých prázdnych riadkov na mieste, kde chceme dosiahnúť formátovanie textu odstavcom.

Zlom riadku

Ak chceme vnútiť zalomenie riadku, na miesto zlomu vložíme znak pre nový riadok (stlačíme Enter).

Text tučným písmom alebo kurzívou

  • Text, ktorý chceme vyznačiť ako tučný (bold) uzavrieme do párovej značky dve hviezdičky. Namiesto hviezdičiek môžeme použiť aj dva podčiarkovníky.
  • Ak chceme aby bol text kurzívou (italic), tak ho uzavrieme do párovej značky jedna hviezdička alebo jeden podčiarkovník.
  • Ak chceme aby bol text aj tučný aj kurzívou, tak ho uzavrieme do párovej značky tri hviezdičky alebo tri podčiarkovníky.

Párová značka znamená, že rovnaká značka sa nachádza pred aj za textom, na ktorý sa uplatňuje.

Príklad použitia:

  • písané tučným písmom – výsledok písané tučným písmom
  • napísané kurzívou alebo italicnapísané kurzívou alebo italic
  • text napísaný tučnou kurzívou – výsledok: text napísaný tučnou kurzívou

Nečíslovaný a číslovaný zoznam

  • Nečíslovaný zoznam začína prázdnym riadkom.
  • Každá položka nečíslovaného zoznamu začína znakom grafickej značky napríklad – (pomĺčka), * (hviezda) a podobne.
  • Každá položka číslovaného zoznamu začína poradovým číslom položky napríklad 1. alebo 4. a podobne.
  • Za poslednou položkou zoznamu sa nachádza prázdny riadok.

Príklad použitia:

Ňečíslovaný zoznam:* \

* prvá položka
* druhá položka
* tretia položka

Výsledok:

  • prvá položka
  • druhá položka
  • tretia položka

Číslovaný zoznam:

\1. položka
\2. položka
\3. položka

Výsledok:

  1. položka
  2. položka
  3. položka

Vloženie obrázka

Obrázok vložíme nasledujúcim zápisom:

  • ![alternatívny text](adresa obrázka)

napríklad: ![Pes s červenou mašľou na hlave](https://www.nasawebovastranka.sk/obrazok-psa-s-maslou.jpg)

Odkaz

Do textu môžeme vkladať odkazy na iné webové stránky či iné dostupné zdroje na internete. Zápis je nasledovný:

  • [text tvoriaci odkaz][url adresa] napríklad: [návod na obsluhu zariadenia][https://www.vyrobca.com/support/user-guide.pdf]

Alebo môžeme zvoliť zápis, ktorý používa zoznam odkazov uvedený na konci textu. Zápis potom vyzerá takto:

  • [text tvoriaci odkaz][1]

text článku

Citácia kódu

Pre zobrazenie presného zápisu programového kódu, ktorý nie je nijako interpretovaný a teda sa ani nevykoná pri návšteve webovej stránky, použijeme uzavretie do apostrofov.

  • \’text citacie\‘

Príklad použitia:

\’for (i<7; i+=i; i++) \‘

Výsledok:

‚For ( i<7; i+=i; i++);

Blockquote

Ak chceme vytvoriť blok textu, napríklad citáciu, začneme riadok znakom >.

Príklad použitia:

Prvý riadok

druhý riadok > >>prvý vnorený riadok > > posledný riadok na pôvodnej úrovni

Výsledok:

Prvý riadok Druhý riadok

prvý vnorený riadok

posledný riadok na pôvodnej úrovni

Vodorovná čiara

Vloženie vodorovnej čiary uskutočníme vložením súvislej reťaze spojovníkov na samostatnom riadku bez prerušenia medzerou.

Tabuľka

Formátovanie tabuliek je súčasťou rozšírenia Markdownu. Obsah do formy tabuľky naformátujeme nasledovne:

  • obsah hlavičkového riadka od údajových buniek oddelíme zvislou čiarou |;
  • obsah nového riadka píšeme do nového riadka;
  • vodorovnú čiaru za hlavičkou vložíme čiarou do buniek – | —- | —– | (pre dvojstĺpcovú tabuľku);
  • zarovnanie textu realizujeme vložením znaku dvojbodka do buniek kde vkladáme horizontálnu čiaru. Dvojbodka vľavo – zarovnanie doľava, vpravo – zarovnanie doprava, vpravo aj vľavo – zarovnanie na stred. (pozri príklad nižšie)
  • Ak chceme detailnejšie formátovať vzhľad tabuľky, použijeme html formátovanie. (pozri dokumentáciu pre formátovanie tabuliek).

Príklad použitia:

| Hlavička stĺpca 1 | Hlavička stĺpca 2 | Hlavička stĺpca 3 | | :— | :—: | —: | | Hodnota bunky 11 | hodnota bunky 12 | hodnota bunky 13 | | Hodnota bunky 21 | hodnota bunky 22 | hodnota bunky 23 |

Výsledok:

Hlavička stĺpca 1 Hlavička stĺpca 2 Hlavička stĺpca 3
Hodnota bunky 11 hodnota bunky 12 hodnota bunky 13
Hodnota bunky 21 hodnota bunky 22 hodnota bunky 23

Poznámka pod čiarou

Poznámku pod čiarou zapíšeme nasledovne:

  • Za touto vetou nasleduje poznámka pod čiarou [\^číslo poznámky]
  • na konci textu potom uvedieme: [\^číslo poznámky]: text poznámky

Zvýraznenie textu – highlight

Ak chceme text zvýrazniť, podsvietiť či podfarbiť použijeme nasledujúci zápis:

  • \=\=zvýraznený text\=\= – výsledkom je: ==zvýraznený text==;
  • alebo použijeme HTML zápis \zvýraznený text\<\/mark> – výsledkom je zvýraznený text.

Dolný index – subscript

Pri zápise výrazu s dolným indexom použijeme uzavretie znaku dolného indexu medzi vlnovky (tilda) \~ alebo použijeme HTML zápis \.

Príklad použitia:

  • H\~2\~O – výsledkom je: H~2~O
  • H\2\<\/sub>O – výsledkom je H2O.

Horný index – superscript

Pre zápis horného indexu uzavrieme znaky horného indexu medzi vokáne (strieška) \^ alebo použije HTML zápis \.

Príklad použitia:

  • x\^2\^ – výsledkom je: x^2^;
  • x\2\<\/sup> – výsledkom je x2.

Čo potrebujeme, aby sme mohli tvoriť s použitím Markdown-u

  1. Potrebujeme znalosť formátovacích značiek jazyka.
  2. Ľubovoľný textový editor, ktorý umožní písanie čistého textu.
  3. Podporu jazyka Markdown v redakčných systémoch, kde budeme publikovať náš obsah. Pre každý redakčný systém existuje niekoľko rozšírení, ktoré nájdeme na internete. Magazín, ktorý čítate je prevádzkovaný na WordPresse a používame plugin WP-Markdown.
  4. Môžeme využiť verifikačný nástroj pre overenie správnosti nášho zápisu. Napríklad Markdown Editor – rozšírenie pre Google Chrome

Záver

Tvorba obsahu pomocou jazyka Markdown je prístupná forma, ktorá umožňuje riadiť výsledný vzhľad textu prezentovaného verejnosti aj s čítačom obrazovky. Jeho veľkou výhodou je, že nepotrebuje samostatný nástroj pre tvorbu obsahu, ale zvládneme to v jednoduchom textovom editore. Výsledok si môžeme, nezávisle na redakčnom systéme, skontrolovať napríklad v Google Chrome rozšírení. Finálny text už iba prilepíme do redakčného systému a publikujeme.

Zdroje

Wikipedia o Markdown Basic Syntaxguide Markdown Cheat Sheet Tables anchor

Jeden komentár

  1. Marco Oros
    Marco Oros 11. marca 2023

    Zdravím. V článku sa stalo to, že príklady sú uvedené, ako výsledky. Môžete sa prosím na to pozrieť?
    Ďakujem.

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

Táto webová stránka používa Akismet na redukciu spamu. Získajte viac informácií o tom, ako sú vaše údaje z komentárov spracovávané.