Obsahová část webů postavených na Gravu je především formátována prostřednictvím značkovacího jazyka Markdown. Kromě základní syntaxe (např. nadpisy, tučně, kurzíva, odkaz, obrázek, seznamy atd.) Grav disponuje i rozšířenou syntaxí jazyka (zejména tabulky) kompatibilní s vývojářskou platformou GitHub. Nicméně to není vše. Prostřednictvím různých rozšíření lze docílit nadstavbových možností jazyka. Jedním z nich je použití doplňku Markdown Notices.

Za zmínku stojí, že se jedná o jeden z mála doplňků, které se nainstalují současně se systémem Grav. Autoři jeho prostřednictvím pravděpodobně chtějí demonstrovat snadnou rozšiřitelnost formátování značkovacího jazyka Markdown. Po instalaci a aktivaci uvedeného doplňku můžeme formátovat odstavce jednoduchými tagy !, !!, !!! a !!!!, kdy ve výchozím nastavení docílíme následujících barev:

Markdown pro zobrazení předchozího příkladu pak vypadá následovně:

! Žlutá

!! Červená

!!! Modrá

!!!! Zelená

Za tagy následuje mezera, stejně jako v případě nadpisů nebo seznamů.

HTML pro zobrazení předchozího příkladu pak vypadá následovně:

<div class="notices yellow">
<p>Žlutá</p>
</div>
<div class="notices red">
<p>Červená</p>
</div>
<div class="notices blue">
<p>Modrá</p>
</div>
<div class="notices green">
<p>Zelená</p>
</div>

Lze polemizovat nad logikou pořadí barev. Osobně bych třeba preferoval pořadí červená, žlutá, zelená a modrá. V nastavení doplňku lze uvedené pořadí jednoduše změnit, avšak je otázkou, zda to nebude matoucí, zvláště pokud na každém spravovaném webu bude jiné nastavení.

Primárním účelem doplňku je formátování poznámek, resp. souhrnů, ale rovněž lze sekundárně použít pro jakékoliv zvýraznění odstavce. Určitě je žádoucí, aby bylo dodrženo jednotné formátování pro specifické typy poznámek, např. žlutá (!) pro informace, červená (!!) pro chyby nebo varování, modrá (!!!) pro tipy a zelená (!!!!) pro opakování, memorování nebo standardní poznámku.

Výchozí formátování je značně jednoduché a osobně mi na něm nejvíce vadí, že texty jsou vertikálně zarovnány nahoru (v tomto případě v závislosti na nastavení tagu odstavce v použité šabloně webu) a taktéž, že vpravo schází odsazení, čehož důsledkem se texty dotýkají okraje (v tomto případě je to ovlivněno styly doplňku Markdown Notices). Není o nic kritického, nicméně pokud budete chtít formátování změnit, lze to docílit snadno prostřednictvím úpravy stylů. Na výběr máme možnost zcela vypnout výchozí styly v nastavení doplňku a nahradit je plně vlastními, popř. výchozí styly můžeme ponechat aktivní a přepsat (či přidat) pouze požadované části stylů.

Zde je výchozí stylování uložené v souboru /user/plugins/markdown-notices/assets/notices.css:

.notices {
    padding: 1px 1px 1px 30px;
    margin: 15px 0;
}

.notices p {

}

.notices.yellow {
    border-left: 10px solid #f0ad4e;
    background: #fcf8f2;
    color: #df8a13;
}

.notices.red {
    border-left: 10px solid #d9534f;
    background: #fdf7f7;
    color: #b52b27;
}

.notices.blue {
    border-left: 10px solid #5bc0de;
    background: #f4f8fa;
    color: #28a1c5;
}

.notices.green {
    border-left: 10px solid #5cb85c;
    background: #f1f9f1;
    color: #3d8b3d;
}

Vidíme, že se jedná o jednoduché základní formátování kontejneru div s třídou notices s následnou úpravou barevnosti pro jednotlivé typy upravené třídami yellow, red, blue a green.

Před časem jsem na Grav převáděl web Memoriál Miroslava Petiry, kde v použité šabloně Saturn působily poznámky s výchozím formátováním značně rušivě. Náhradou stylů došlo k jejich úpravě, která zohledňuje především shora uvedené nedostatky:

.notices {
    padding: 10px 10px 10px 20px;
    border: 1px solid;
    border-radius: 10px;
}

.notices p {
    margin: 0.5em;
}

Uvedené styly jsou pouze inspirativní, lze si je upravit dle potřeb, aby korespondovaly s ostatním formátováním webu. Pochopitelně není problém přidat do poznámek příslušné piktogramy (ikony), které budou blíže ilustrovat typ poznámkového odstavce.

Obsahem poznámkových bloků nemusí být pouze nezformátovaný odstavec, ale lze pochopitelně využívat značkování Markdown (ale i HTML) v plné šíři:

p {
   margin: 1em;
}

Jak je vidět z uvedeného příkladu, neexistují při formátování obsahu v poznámkových blocích žádná omezení.