29 września 2018

Kramdown - kontrola atrybutów html

Jak kontrolować styl css elementów z poziomu Kramdown

Generując kontent z formatu Kramdown (opens new window), często potrzebujemy dodać nowe klasy lub style do elementów w html. Możemy to łatwo zrobić. Jekyll (opens new window) domyślnie wspiera kramdown.

Opcje za elementem

### Nagłówek_1
{:style="color: blue;" class="head"}

### Nagłówek_2
{:class="red"}

* element_1
* element_2
* element_3
{:style="margin-bottom: 25px;"}
<h3 style="color: blue;" class="head" id="nagwek1">Nagłówek_1</h3>

<h3 class="red" id="nagwek2">Nagłówek_2</h3>

<ul style="margin-bottom: 25px;">
  <li>element_1</li>
  <li>element_2</li>
  <li>element_3</li>
</ul>

Opcje przed elementem

W przypadku, gdy mamy do czynienia ze zwykłym paragrafem (elementem <P>), nie możemy dodać atrybutów za elementem, zatem pozostaje nam dokonanie tego przed. Istotne, by pamiętać o zachowaniu pustej linii, która oddzieli poprzedni znacznik.

### Nagłówek_1
{:style="color: blue;" class="head"}

{:style="margin-top: 25px;"}
treść treść treść
<h3 style="color: blue;" class="head" id="nagwek1">Nagłówek_1</h3>

<p style="margin-top: 25px;">treść treść treść</p>