Markdown Feature Showcase with Examples

By Adhir 5 min read

A full showcase of Markdown syntax rendered in Eleventy with markdown-it plugins. Includes headings, blockquotes, lists, tables, footnotes, admonitions, attributes, and code examples.

Markdown Feature Showcase with Examples

This post demonstrates the full set of Markdown features supported in Eleventy when using markdown-it and its plugin ecosystem.
Useful for testing your setup and styling.

Headings

H1

H2

H3

H4

H5
H6
# H1
## H2
### H3
#### H4
##### H5
###### H6

Paragraph, Bold & Italic

Normal paragraph with bold, italic, and bold italic.

Inline code: console.log("hello")

Normal paragraph with **bold**, *italic*, and ***bold italic***.

Inline code: `console.log("hello")`

Blockquote

This is a blockquote.

It can span multiple lines.

Nested blockquote

> This is a blockquote.  
>  
> It can span multiple lines.  
>
>> Nested blockquote

Lists

Unordered

  • Item 1
  • Item 2
    • Sub-item
    • Sub-item 2
- Item 1
- Item 2
  - Sub-item
  - Sub-item 2

Ordered

  1. Step one
  2. Step two
    1. Nested step
    2. Nested step 2
1. Step one
2. Step two
   1. Nested step
   2. Nested step 2

Task list

- [x] Task one
- [ ] Task two
- [ ] Task three

Code Blocks

# Shell example
npx @11ty/eleventy --serve
// JavaScript example
const msg = "Hello, Eleventy";
console.log(msg);
# Shell example
npx @11ty/eleventy --serve
// JavaScript example
const msg = "Hello, Eleventy";
console.log(msg);

Tables

Tool Purpose Status
Eleventy Static generator ✅ Live
Netlify Deployment ✅ Live
markdown-it Markdown parser 🚀 Enabled 
| Tool       | Purpose         | Status   |
|------------|-----------------|----------|
| Eleventy   | Static generator| ✅ Live   |
| Netlify    | Deployment      | ✅ Live   |
| markdown-it| Markdown parser | 🚀 Enabled |

Images

Bender saying "Bite my shiny metal ass"

![Bender saying "Bite my shiny metal ass"](https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png "Bite my shiny metal ass")

Footnotes

This sentence has a footnote.[1]
And another one with a second footnote.[2]

This sentence has a footnote.[^1]  
And another one with a second footnote.[^2]  

[^1]: Footnote text #1.  
[^2]: Footnote text #2.

Definition List

Term A
Definition one
Definition two
Term B
Another definition
Term A  
: Definition one  
: Definition two  

Term B  
: Another definition

Admonitions (Containers)

This is a note container.

::: note
This is a **note** container.
:::

This is a warning container.

::: warning
This is a **warning** container.
:::

Attributes

Bench Results

This heading has an ID (bench), a class (muted), and an attribute (data-env=prod).

### Bench Results {: #bench .muted data-env=prod}

This heading has an ID (`bench`), a class (`muted`), and an attribute (`data-env=prod`).

  1. Footnote text #1. ↩︎

  2. Footnote text #2. ↩︎