Markdown

Inline Elements

This is emphasized text, as well as this.

This is strong emphasized text, as well as this.

This is both, as well as this, this, or this.

This is strikethrough text.

This is *emphasized* text, as well as _this_.  
This is **strong emphasized** text, as well as __this__.  
This is ***both***, as well as ___this___, __*this*__, or **_this_**.
This is ~~strikethrough~~ text. 

This is inline code.

And this 
is a
code block.

```
And this 
is a
code block.
```

    ```
    And this 
    is a
    code block.
    ```

Headings & Titles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Table of Contents

<details class="toc">
  <summary markdown="span">Table of Contents</summary>

{:toc}
1. TOC

</details>

This must be included in every markdown, jekyll doesn’t convert it if the TOC is in a /_include or _layout folder. Therefore I use this solution.

If a heading should not appear in the TOC, apply {:.no_toc} to it.

Custom Containers

An info box.

A warning.
Multiple
Lines.

A notification with a title.

A notification with a title and an icon.

{:.info}
An info box.

{:.warn title="Warning"}
A warning.  
Multiple  
Lines.

{:.note .icon-language title="This is a title"}
A notification with a title and an icon.

Footnotes

Footnote 1 link¹.

Footnote 2 link².

Duplicated footnote reference².

Footnote 1 link[^first].

Footnote 2 link[^second].

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**
    and multiple paragraphs.
    
[^second]: Footnote text.

The extra new lines after each footnote and footnote-definition is neccessary, otherwise markdown doesn’t convert them properly.

Definition lists

Term 1

Definition 1 with lazy continuation.

Term 2 with inline markup

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.

Term 1
:   Definition 1
with lazy continuation.

Term 2 with *inline markup*
:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

Abbreviations

This is HTML abbreviation example. It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.

This is HTML abbreviation example.
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

Code Blocks

``` html
< your code here >
```
{: .bad}

~~~html
<code>
~~~
{: .good txt="html"}

    <code>
{: .icon-language txt="folder/index.html"}

Images

Videos

Youtube Videos

<figure class="video-container ">
  <iframe src="https://www.youtube-nocookie.com/embed/WCdUziFPipI?rel=0;modestbranding=1"
          frameborder="0" allowfullscreen
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
  </iframe>
</figure>

When you get the YouTube Embedded Share code, make sure to tick the Enable privacy enhanced mode checkbox. The only thing that changes is the url, it becomes youtube-nocookie.com.

Local Videos

<figure class="video-container">
  <video controls="true" allowfullscreen="true" poster="path/to/poster.png">
    <source src="path/to/video.mp4" type="video/mp4">
    <source src="path/to/video.ogg" type="video/ogg">
    <source src="path/to/video.webm" type="video/webm">
  </video>
</figure>

Tables

| Default aligned | Left aligned | Center aligned  | Right aligned  |
|-----------------|:-------------|:---------------:|---------------:|
| First body part | Second cell  | Third cell      | fourth cell    |
| Second line     | foo          | **strong**      | baz            |
| Third line      | quux         | baz             | bar            |
|-----------------+--------------+-----------------+----------------|
| Second body     |              |                 |                |
| 2nd line        |              |                 |                |
|-----------------+--------------+-----------------+----------------|
| Third body      |              |                 | Foo            |

Kramdown

Inline Options

{::options parse_block_html="true" /}

Attribute List Definitions

{:ref_def_name: .c1 #id .c2 title="title"}


paragraph
{: ref_def_name .c3 title="t" #para}

Mathjax

Yaml-header: mathjax: true

Inline math expressions \(ax^2+bx+c=0\)

$$ax^2+bx+c=0$$

Block expressions:

$$
ax^2+bx+c=0
$$

Kramdown seems to render mathjax expressions depending on the context (is there a linebreak before?) - so each mathjax expression is surrounded by 2 dollar signs.

Jekyll

Errors

Error: EventMachine

Unable to load the EventMachine C extension;
To use the pure-ruby reactor, require 'em/pure_ruby'

Solution (see this GitHub Issue):

gem uninstall eventmachine
gem install eventmachine --platform ruby