Markdown je jednoduchý značkovací jazyk, který z principu umožňuje základní formátování obsahu. Z předchozí definice je zřejmé, že současně omezuje přílišnou kreativitu. Což je naprosto v pořádku. S přihlédnutím k uvedenému dosáhneme jednotného formátování celého dokumentu, aniž by docházelo k dílčím odchylkám u jednotlivých elementů, či jiným rušivým prvkům způsobených tvůrcem s větší mírou fantazie.

Markdown prakticky umožňuje pouze vkládání nadpisů, odstavců, tříděných a netříděných seznamů (včetně vnořených), citací, kódů (řádkových i blokových), horizontální čáry, odkazů a obrázků. Dále je možné provádět formátování částí textů, a to tučné a kurzívu (resp. kombinaci uvedených). To je vše.

V rozšířené syntaxi, kterou (částečně) zvládá i Grav, pak lze vkládat i tabulky, definiční seznamy, úlohové seznamy (se zaškrtávacími políčky), identifikátory tříd (s využitím i pro kotvy odkazů) a poznámky pod čarou. Dále je možné provádět formátování částí textů, a to přeškrtnutí, horní a dolní index a zvýraznění (podsvícení). Co konkrétně Grav z rozšířené syntaxe zvládá si vyzkoušejte, popř. se podívejte do oficiální nápovědy Markdown Syntax. Pokud něco nelze realizovat přímo Markdownem, pak existují různé doplňky, popř. použijeme postup popsaný dále v článku.

Markdown je následně přeložen (parsován) do HTML a předán prohlížeči. Výsledkem je kompaktní dokument, který můžeme jednotně zformátovat prostřednictvím kaskádových stylů. Přesto se někdy nevyhneme tomu, že chceme konkrétní část (decentně) upravit, aby vynikla. Nebo potřebujeme použít elementy (popř. jejich vlastnosti), kterými Markdown nedisponuje. A do třetice pak může být důvodem to, že nelze v Markdownu některé prvky z logiky jeho formátování použít společně, protože se to prostě vylučuje.

Řešení je kupodivu snadné. Buď máme možnost Markdown zcela vypustit a vložit čisté HTML (v tomto případě pak můžeme zpracování Markdownu vypnout, neboť není co parsovat), nebo provedeme základní formátování prostřednictvím Markdownu a pro „problematické“ části použijeme HTML.

Není v mých možnostech popsat všechny situace, kdy bude potřeba použít přímo HTML. Vždy to vyplyne z konkrétní situace. Namátkou uvedu následující příklady. Pouze ještě jednou připomínám, že méně je mnohdy více a proto je používejte tam, kde je to nezbytně nutné.

Barva textu

Markdown

Lze například změnit písmo na **tučné** nebo na _kurzívu_, ale též změnit jeho <span style="color: #f00;">barvu na červenou</span>, stejně jako v běžném typu odstavců. Bez problémů lze vytvořit i [odkaz](/blog).

HTML

<p>Lze například změnit písmo na <strong>tučné</strong> nebo na <em>kurzívu</em>, ale též změnit jeho <span style="color: #f00;">barvu na červenou</span>, stejně jako v běžném typu odstavců. Bez problémů lze vytvořit i <a href="/blog">odkaz</a>.</p>

Výsledek

Lze například změnit písmo na tučné nebo na kurzívu, ale též změnit jeho barvu na červenou, stejně jako v běžném typu odstavců. Bez problémů lze vytvořit i odkaz.

Ukázka

Viz poznámkový blok formátovaný doplňkem Markdown Notices na konci článku Doplněk Markdown Notices.

Obtékání textu kolem obrázku

Markdown

<span style="float: left; margin-right: 1em;">![Image](image.png)</span>Lorem ipsum...

HTML

<p><span style="float: left; margin-right: 1em;"><img alt="Image" src="image.png"></span>Lorem ipsum...</p>

Ukázka

Viz obrázky u druhých odstavců tohoto, resp. následujících článků:

• Doplněk Stamp v1.0.4
• Galerie vytvořená z náhodně vybraných obrázků

Viz fotografie na stránce Majitelka na webu Tiskárna LT, kde je použito zarovnání prostřednictvím třídy a centralizovaného CSS.

Netříděný seznam v tabulce

Markdown

| | |
| - | -: |
| **Položka** | <span style="color: blue;">**Popis**<span><ul style="text-align: left; margin: 0 0 0 50px;"><li>detail 1<li>detail 2<li>detail 3</ul> |

HTML

<table>
<thead>
<tr>
<th></th>
<th style="text-align: right;"></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong> Položka </strong></td>
<td style="text-align: right;"><span style="color: blue;"><strong>Popis</strong><span><ul style="text-align: left; margin: 0 0 0 50px;"><li>detail 1<li>detail 2<li>detail 3</ul></td>
</tr>
</tbody>
</table>

Výsledek

Ukázka

Viz Ceník služeb na webu PorodníBába.cz.

Opět záleží na konkrétním případu, zda je vhodnější použít lokální formátování přímo v kódu HTML nebo sdílené prostřednictvím CSS souboru. Pro ukázku jsem ponechal v posledním příkladu formátování tabulky se záhlavím, které je prázdné, ale musí být součástí tabulky, pokud chceme prostřednictvím Markdownu provádět zarovnání sloupců. V případě, že prázdné záhlaví tabulky narušuje stránku (větším horním okrajem nad tabulkou), pak je vhodné tagy <thead> přes styly skrýt (display: none;). Dále je dobré zkontroloval vložené prvky a případně jim upravit vlastnosti, aby zapadaly. Např. netříděnému seznamu byly upraveny okraje, protože byl značně odsazen, zejména to bylo patrné u horního a dolního okraje. Dále je v této ukázce odsazen levý okraj seznamu, aby odrážky nezapadaly do prvního sloupce (v praktickém případě je třeba si pohrát s celou tabulkou).

Závěrem jenom dodávám, že stejně jako Jára Cimrman přicházel se svými objevy vždy pozdě, tak i já jsem pozdě objevil, že téměř vše, co jsem v minulosti řešil prostřednictvím HTML a zde popsal, je podrobně zdokumentováno v části Hacks shora uvedeného webu Markdown Guide. Na druhou stranu mi může být útěchou, že jsem na uvedené přišel zcela nezávisle. A jak se ukázalo, jednalo se i o správnou cestu, která pouze potvrdila, že to nešlo udělat jinak a jednodušeji.