Markdown block

This block makes use of the enhanced, extensible Markdown field developed by Fabian Michael (currently an alpha version without issues).

Headings

# Heading 1
## Heading 2 {#heading-2} // adding an id
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Lists

- Unordered list item
- Unordered list item
   - Unordered list item // 2 spaces
- Unordered list item


1. Ordered list item
2. Ordered list item
   1. Ordered list item // 3 spaces
   2. Ordered list item
3. Ordered list item


First term in a definition list
: This is the definition of the first term.

Second term
: This is the definition of the second term.
: This is another definition of the second term.

• Unordered list item
• Unordered list item
  • Unordered list item
• Unordered list item

1. Ordered list item
2. Ordered list item
   1. Ordered list item
   2. Ordered list item
3. Ordered list item

First term in a definition list

This is the definition of the first term.

Second term

This is the definition of the second term.

This is another definition of the second term.

Inline formatting

Important text in **bold** 
Emphasized text in *italic* 
Use backticks to define `code` 
Superscript 100m^ 2  // omit the extra space
Subscript H~ 20 // omit the extra space

Important text in bold
Emphasized text in italic
Use backticks to define code
Superscript 100m²
Subscript H₂0

Links

Markdown can really help with managing links, while keeping text relatively clean and readable. Place these reference-style links anywhere in the field, at the very top or bottom or directly after the paragraph where the links are used.

Combine [Markdown][1], [Kirbytext][2] and HTML in one block.

[1]: https://getkirby.com/docs/reference/text/markdown
[2]: https://getkirby.com/docs/reference/text/kirbytags

Combine Markdown, Kirbytext and HTML in one block.

Anchor Links

Read more on this page about:
- [Columns](#columns)
- [Images](#images)

Read more on this page about:

• Columns
• Images

Footnotes

The footnotes will be automatically placed at the bottom of the page or, when using different blocks, at the bottom of the Markdown Block.

Sentence with a footnote [^ 1] and a second footnote [^ 2].

[^ 1]: This is the first footnote.
[^ 2]: The second footnote.

// Note: omit the space after the caret symbol

Sentence with a footnote ¹ and a second footnote ².

Columns

This is a Kirby plugin to define columns in Markdown.
White space matters in Markdown, so make sure to omit the space after the first columns and the … and use a white line before and after the four plus signs ++++.

(columns …) // omit the space before the dots

### Column heading 1
Columns use a two column layout. Text in columns is displayed slightly smaller. Add as many columns as you like.

++++

### Column heading 2
Columns use a two column layout. Text in columns is displayed slightly smaller. Add as many columns as you like.

++++

### Column heading 3
Columns use a two column layout. Text in columns is displayed slightly smaller. Add as many columns as you like.

++++

### Column heading 4
Columns use a two column layout. Text in columns is displayed slightly smaller. Add as many columns as you like.

(…columns)

Images

The Kirbytext version to define an image.
Leave out the space after the opening parenthesis.

( image: usgs-83psfuipoes-unsplash.jpg 
  link: documentation 
  title: Link to documentation
  caption: Satellite image by <a href="https://unsplash.com/@usgs">usgs</a>
  alt: Satellite image)

Resize an image

This will generate a resized version (in WebP format) of the image based on the width/height attribute. The Example below will also add a lightbox function, with link and linkclass.

( resize: usgs-83psfuipoes-unsplash.jpg 
  width: 720 
  caption: Resized satellite image by usgs 
  alt: Satellite image
  link: self
  linkclass: spotlight)

Resized images (400px) in columns

For a nice display of images the plugin generates images twice the size of the specified width.

Notes in Markdown

Note with an aside tag

<aside class="ck-note-info" markdown="1">
 This is an example *Info Note* in an aside tag.
</aside>