Markdown block
A very powerful block which can combine Markdown, Kirbytext and HTML all in one block. Besides text elements images and video can also be used. This might be the only block you need if you like a text based approach.
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
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- 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 100m2
Subscript H20
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:
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 1 and a second footnote 2.
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)
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.
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
This is an example Info Note.
This is an example Important Note.
Note with an aside tag
<aside class="ck-note-info" markdown="1">
This is an example *Info Note* in an aside tag.
</aside>