Enhanced Markdown

The Standard Framework adds powerful markdown extensions for richer content.

Extended Syntax

Footnotes

Add footnotes to your markdown:

This is a statement[^1] with a footnote.

[^1]: This is the footnote content.

Renders with automatic footnote links and backlinks.

Callouts

Create styled callout boxes:

> [!NOTE]
> This is an important note that stands out visually

> [!WARNING]
> This requires your attention

> [!TIP]
> Here's a helpful tip

> [!DANGER]
> This is dangerous - be careful!

> [!INFO]
> Additional information

Callout types:

[!NOTE] – Blue info box
[!WARNING] – Orange warning box
[!TIP] – Green tip box
[!DANGER] – Red danger box
[!INFO] – Light blue info box

Code Block Escaping

Prevent code in markdown from being processed:

// Configure in eleventy.config.js
eleventyConfig.addPlugin(Standard, {
  escapeCodeBlocks: ['liquid', 'nunjucks']
});

In markdown:

```liquid
{% for item in items %}
  Item: {{ item }}
{% endfor %}
```

The code block won’t be processed as a template.

Standard Markdown Features

Headings

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

Emphasis

*italic* or _italic_
**bold** or __bold__
***bold italic***
~~strikethrough~~

Lists

# Unordered
- Item 1
- Item 2
  - Nested item
  - Another nested

# Ordered
1. First
2. Second
3. Third

# Mixed
- Main
  1. Sub-ordered
  2. Another sub
- Another main

Links

[Link text](https://example.com)
[Link with title](https://example.com "Title")
<https://example.com>

Images

![Alt text](image.jpg)
![Alt text](image.jpg "Image title")

Blockquotes

> This is a blockquote
> that can span multiple lines
>
> > And can be nested

Code

Inline `code` like this
Or a code block:

```javascript
function hello() {
  console.log("Hello World");
}


### Tables

```markdown
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Horizontal Rule

---

Markdown Configuration

In eleventy.config.js

import Standard from "@zefish/standard";

eleventyConfig.addPlugin(Standard, {
  // Escape code blocks for these languages
  escapeCodeBlocks: ["liquid", "nunjucks"],

  // Standard Framework automatically enables:
  // - Footnotes (via markdown-it-footnote)
  // - Obsidian callouts (via markdown-it-obsidian-callouts)
  // - Syntax highlighting (via @11ty/eleventy-plugin-syntaxhighlight)
});

Front Matter in Markdown

Control rendering with front matter:

---
layout: layouts/article.njk
title: Article Title
description: Short description
tags:
  - featured
  - important
---

# Article content here

Liquid/Nunjucks in Markdown

Use template syntax in markdown:

---
layout: layouts/base.njk
---

# {{ title }}

Hello {{ author }}, welcome to {{ site.name }}.

{% for item in items %}
- {{ item }}
{% endfor %}

Disable with escapeCodeBlocks for code examples.

Markdown Best Practices

✓ Do

Use headings for structure
Write in short paragraphs
Link to related content
Use callouts for emphasis
Include descriptive image alt text
Use tables for data
Break complex content into sections

✗ Don’t

Skip the H1 heading
Write overly long paragraphs
Nest lists too deeply
Use ONLY emphasis for structure
Forget alt text on images
Use HTML when markdown works
Mix markdown and HTML

Common Patterns

Article with Callout

---
layout: layouts/article.njk
title: Advanced Guide
---

# Advanced Guide

> [!WARNING]
> This guide is for experienced users

## Introduction

Here's the content...

> [!TIP]
> Remember to backup before proceeding

Post with Footnotes

---
layout: layouts/article.njk
---

# Research Article

This finding[^1] is significant[^2].

[^1]: First reference
[^2]: Second reference provides more context

Code Examples with Multiple Languages

```javascript
// JavaScript example
const greeting = "Hello";
```

```python
# Python example
greeting = "Hello"
```

```bash
# Bash example
echo "Hello"
```

Rendering Options

Output with Syntax Highlighting

Code blocks automatically get syntax highlighting based on language:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

Highlighted Lines

Configure in 11ty for highlighted line numbers:

```javascript
// highlight-line
const important = true;
```