Kramdown

https://kramdown.gettalong.org/

Kramdown is the default Markdown renderer for Jekyll and use the GitHub Flavored Markdown (GFM) processor.

Classes ids and attributes can be added with an Inline Attribute List (IAL) {: .class #id key="value"}

Table of content

- toc
{:toc}
# Title
{:.no_toc}

Tables

Use |---- for a new <tbody> and |==== for a <tfoot>

Header	Number	Boolean
String	14.7	true

Code

Inline

Surround with backticks `code`

CSS {:.language-css} es. body[hidden]{ color: hsl(30, 40%, 50%);}
HTML: {:.language-html} es. <p data-type='ciro'></p>

Style with language: Rouge languages list

// language-c
YYYY-MM-DDTHH:mm
url/path

// language_sass
YYYY-MM-DDTHH:mm
url/path

# language-make
YYYY-MM-DDTHH:mm
url/path

// language-pony
YYYY-MM-DDTHH:mm
url/path

Block

Fenced
```yml ... ```

city: 1
caos: "ok"
array:
  - 1
  - 2
  - three
array: [1, 2, "three"]

Indented by 4 spaces
{:.language-html} … emply line

<body>
  <a href="#url">text</a>
</body>

Kramdown code block
~~~ coffee ... ~~~

console.log a, 'error'
c = (arg) -> arr.index()
$('body').append(arr)

Blockquotes and quotes

Support background-{color} classes, changing border color.

Example with cite attribute (source url)

Inline quotation element

<q cite="{source url}">Quote</q>

Quote

Typography

Kramdown	Result
`__` `**`	Bold
`_` `*`	Italic

Abbreviations

Abbreviated text is written normally and below the text add
*[normally]: Abbreviation

Rendered HTML code:

<abbr title="Abbreviation">normally</abbr>

Footnotes

Text is followed¹ by [^1] and below the text add [^1]: Footnote.
The note will be added at the end² of the document.

Rendered HTML code:

<sup id="fnref:1" role="doc-noteref">
  <a href="#fn:1" class="footnote" rel="footnote">1</a>
</sup>

...

<div class="footnotes" role="doc-endnotes">
  <ol>
    <li id="fn:1" role="doc-endnote">
      <p> ... <a href="#fnref:1" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
    </li>
    ...
  </ol>
</div>

Definition lists

Elements: <dl><dt><dd>
Markdown: : for the descriptions

Empty line before new term
End with a definition

term
: definition
: another definition

another term
and another term
: and a definition for the term

term: definition; another definition
another term
and another term: and a definition for the term

Some markdown footnote definition ↩
End of page ↩