Write:
Your text here is a non-breaking space; repeating it forces visible indentation in HTML-capable Markdown when normal leading spaces would be collapsed/trimmed.
Most renderers generate an id from the heading text.
Write:
## My Section Title
Jump to it: [go](#my-section-title)Write:
<h2 id="my-section">My Section Title</h2>Link:
[go](#my-section)Write:
<a id="my-section"></a>
## My Section TitleWrite:
Jump: [go to anchors](#creating-headings-and-section-anchors)Write:
Read the docs: [Docs](/docs/)Write:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in a new tab</a>Write:
- One
- Two
- ThreeWrite:
1. First
2. Second
3. ThirdWrite:
- Parent item
- Child item
- Another child
- GrandchildWrite:
Use the `npm run build` command.Write:
```js
console.log('hello');
```Write:
```
Plain code block.
```Write:
<pre><code class="language-js">console.log('hello');</code></pre>Write:
Here is an image in the middle of a paragraph.
Write:
<figure>
<img src="/images/example.png" alt="Alt text describing the image" />
<figcaption>Caption text goes here.</figcaption>
</figure>Write:
> This is a quote.
> It can span multiple lines.Write:
> **Note:** This is a note.Write:
> [!TIP]
> This is a tip.Write:
- [ ] Not done yet
- [x] Done
- [ ] Nested task (renderer-dependent)Write:
Press <kbd>Ctrl</kbd> + <kbd>C</kbd>.Write:
Press `Ctrl` + `C`.Write:
| Col A | Col B | Col C |
|------:|:------|:-----:|
| 123 | left | mid |
| 4 | text | ok |
Rendered:
| Col A | Col B | Col C |
|---|---|---|
| 123 | left | mid |
| 4 | text | ok |
Notes:
---: right-align, :--- left-align, :---: center.If your renderer supports footnotes:
Write:
This sentence needs a footnote.[^1]
[^1]: This is the footnote text.Write:
Einstein: $E=mc^2$Write:
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$Write:
`E=mc^2`
```text
sum(i=1..n) i = n(n+1)/2
```Write:
<details>
<summary>Show more</summary>
Hidden content goes here.
</details>Write:
\*This will not be italic\*
\# This will not become a heading
\[This will not become a link\]
Use `*` for emphasis.Write:
~~~js
console.log('tilde fence');
~~~Write:
```md
```js
console.log('nested');
```
```Write:
<pre><code class="language-css">.btn { padding: 1rem; }</code></pre>Long lines are allowed; wrapping depends on your CSS/renderer.
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1); // 25.1
toFixed(25.198726354, 2); // 25.19
toFixed(25.198726354, 3); // 25.198
toFixed(25.198726354, 4); // 25.1987
toFixed(25.198726354, 5); // 25.19872
toFixed(25.198726354, 6); // 25.198726Use these inside the body of a file. If --- is at the very top of the file, it starts YAML front matter.
Write (Markdown):
---
***
___Write (HTML):
<hr />Useful for keeping URLs out of the paragraph.
Write:
Read the [Docs][docs] and the [FAQ][faq].
[docs]: https://example.com/docs
[faq]: https://example.com/faqWrite:
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/Yw6u6YkTgQ4"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>Write:
<iframe
width="100%"
height="300"
scrolling="no"
frameborder="no"
allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/422530128&auto_play=false"
></iframe>Common types (depending on what your setup enables):
graph LR
A[Square] --> B((Circle))
B --> C{Decision}sequenceDiagram
participant U as User
participant S as Site
U->>S: Request
S-->>U: Responsepie title Example
"Searching" : 90
"Watching" : 10Eleventy reads YAML front matter between the first --- at the top of the file and the next ---.
Write:
---
title: A post title
description: One sentence summary.
date: '2026-01-19' # or: 2026-01-19
updated: '2026-01-20' # optional
layout: layouts/post.njk # optional
tags:
- demo-content
- docs
permalink: posts/{{ title | slug }}/index.html
---Write:
---
title: Draft example
draft: true
# Or exclude from collections entirely:
eleventyExcludeFromCollections: true
---Write:
---
title: Posts index
layout: layouts/base.njk
pagination:
data: collections.posts
size: 10
alias: posts
permalink: "posts/{{ pagination.pageNumber | plus: 1 }}/index.html"
---Write:
---
title: Resources
layout: layouts/page.njk
eleventyNavigation:
key: Resources
order: 3
---Write:
---
title: "My Post"
tags: [posts]
eleventyComputed:
permalink: "posts/{{ title | slug }}/index.html"
# Example derived field:
# description: "{{ summary | default('') }}"
---Write (disable output):
---
title: "No output"
permalink: false
---Write (dynamic permalink):
---
title: "Yearly archive"
permalink: "posts/{{ date | date: '%Y' }}/index.html"
---Write:
---
title: "Render Markdown through Nunjucks"
markdownTemplateEngine: njk
# Or override the template engines for this file:
# templateEngineOverride: njk,md
# Also possible:
# dataTemplateEngine: njk
---Eleventy does not ship redirects by default; these keys are commonly used with redirect plugins.
Write:
---
title: "Moved page"
permalink: "/new-url/"
redirectFrom:
- "/old-url/"
- "/older-url/"
# Some setups use `aliases` instead:
# aliases:
# - "/old-url/"
---Write:
---
title: "Canonical example"
canonical: "https://example.com/posts/canonical-example/"
---If you have src/_data/site.json, you can reference it in templates like site.title.
Example:
---
title: "{{ site.title }}"
------
title: "Post title"
description: "One sentence summary."
date: '2026-01-19'
tags: [posts]
layout: layouts/post.njk
permalink: "posts/{{ title | slug }}/index.html"
---
## Section title
Text.
### Subsection
- Point
- Point
```js
console.log('code sample');
```
[Back to top](#toc)### What it does
One sentence.
**Write**:
```md
...your example here...
```
**Rendered**:
...show output here...<figure>
<img src="/images/example.png" alt="Describe the image" />
<figcaption>Short caption.</figcaption>
</figure>Note: "{% raw %} {% endraw %}" is used for this template.
]]>