sakrishive

Markdown + Eleventy Reference Template

| 5 min read

Table of Contents

Most-used basics

Writing and formatting helpers

Technical extras

Rich media

Eleventy front matter

Ready-to-paste snippets

Escaping spaces

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.

Back to TOC

Creating headings and section anchors

Option A: rely on automatic heading slugs

Most renderers generate an id from the heading text.

Write:

## My Section Title

Jump to it: [go](#my-section-title)

Option B: force a stable id using HTML (most reliable)

Write:

<h2 id="my-section">My Section Title</h2>

Link:

[go](#my-section)

Option C: add an explicit anchor before a normal heading

Write:

<a id="my-section"></a>
## My Section Title

Back to TOC

Linking to sections and external pages

Link to a section on the same page

Write:

Jump: [go to anchors](#creating-headings-and-section-anchors)

Link to another page

Write:

Read the docs: [Docs](/docs/)

HTML link (when you need extra attributes)

Write:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in a new tab</a>

Back to TOC

Writing lists (bullets, numbers, nesting)

Bullet list

Write:

- One
- Two
- Three

Numbered list

Write:

1. First
2. Second
3. Third

Nested list

Write:

- Parent item
  - Child item
  - Another child
    - Grandchild

Back to TOC

Writing code inline and in blocks

Inline code

Write:

Use the `npm run build` command.

Code block with syntax highlighting

Write:

```js
console.log('hello');
```

Code block without a language

Write:

```
Plain code block.
```

HTML version (when Markdown is being annoying)

Write:

<pre><code class="language-js">console.log('hello');</code></pre>

Back to TOC

Adding images inside text

Basic image

Write:

Here is an image in the middle of a paragraph.

![Alt text describing the image](/images/example.png)

Image with a caption (HTML)

Write:

<figure>
  <img src="/images/example.png" alt="Alt text describing the image" />
  <figcaption>Caption text goes here.</figcaption>
</figure>

Back to TOC

Writing blockquotes and simple callouts

Plain blockquote

Write:

> This is a quote.
> It can span multiple lines.

Portable callout style

Write:

> **Note:** This is a note.

Renderer-specific callout (only if supported)

Write:

> [!TIP]
> This is a tip.

Back to TOC

Writing task lists

Write:

- [ ] Not done yet
- [x] Done
  - [ ] Nested task (renderer-dependent)

Back to TOC

Writing keyboard shortcuts

HTML (best looking, common in docs)

Write:

Press <kbd>Ctrl</kbd> + <kbd>C</kbd>.

Markdown fallback

Write:

Press `Ctrl` + `C`.

Back to TOC

Writing tables

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.

Back to TOC

Writing footnotes

If your renderer supports footnotes:

Write:

This sentence needs a footnote.[^1]

[^1]: This is the footnote text.

Back to TOC

Writing math with LaTeX

Inline math (renderer-dependent)

Write:

Einstein: $E=mc^2$

Block math (renderer-dependent)

Write:

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Fallback when LaTeX is not supported

Write:

`E=mc^2`

```text
sum(i=1..n) i = n(n+1)/2
```

Back to TOC

Collapsible sections (details/summary)

Write:

<details>
  <summary>Show more</summary>

  Hidden content goes here.
</details>

Back to TOC

Escaping special characters

Write:

\*This will not be italic\*
\# This will not become a heading
\[This will not become a link\]

Use `*` for emphasis.

Back to TOC

Advanced code fences

Use tildes if your content includes lots of backticks

Write:

~~~js
console.log('tilde fence');
~~~

Show a literal fenced block inside a fenced block

Write:

```md
```js
console.log('nested');
```
```

HTML code block (fully manual)

Write:

<pre><code class="language-css">.btn { padding: 1rem; }</code></pre>

Back to TOC

Handling very long code lines

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.198726

Back to TOC

Horizontal rules (Markdown and HTML)

Use 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 />

Back to TOC

Reference-style links

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/faq

Back to TOC

Embedding video

Write:

<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>

Back to TOC

Embedding audio

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>

Back to TOC

Using Mermaid diagrams

Common types (depending on what your setup enables):

  • flowchart
  • sequenceDiagram
  • stateDiagram
  • classDiagram
  • gantt
  • pie

Flowchart

graph LR
  A[Square] --> B((Circle))
  B --> C{Decision}

Sequence diagram

sequenceDiagram
  participant U as User
  participant S as Site
  U->>S: Request
  S-->>U: Response

Pie chart

pie title Example
  "Searching" : 90
  "Watching" : 10

Back to TOC

Eleventy front matter reference

Eleventy reads YAML front matter between the first --- at the top of the file and the next ---.

Common fields

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
---

Drafts and collection behavior

Write:

---
title: Draft example
draft: true
# Or exclude from collections entirely:
eleventyExcludeFromCollections: true
---

Pagination (common pattern)

Write:

---
title: Posts index
layout: layouts/base.njk
pagination:
  data: collections.posts
  size: 10
  alias: posts
permalink: "posts/{{ pagination.pageNumber | plus: 1 }}/index.html"
---

eleventyNavigation (plugin)

Write:

---
title: Resources
layout: layouts/page.njk
eleventyNavigation:
  key: Resources
  order: 3
---

eleventyComputed (computed values)

Write:

---
title: "My Post"
tags: [posts]
eleventyComputed:
  permalink: "posts/{{ title | slug }}/index.html"
  # Example derived field:
  # description: "{{ summary | default('') }}"
---

Output control (permalink tricks)

Write (disable output):

---
title: "No output"
permalink: false
---

Write (dynamic permalink):

---
title: "Yearly archive"
permalink: "posts/{{ date | date: '%Y' }}/index.html"
---

Template engines (override defaults)

Write:

---
title: "Render Markdown through Nunjucks"
markdownTemplateEngine: njk
# Or override the template engines for this file:
# templateEngineOverride: njk,md
# Also possible:
# dataTemplateEngine: njk
---

Redirects / aliases (plugin-dependent)

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/"
---

Canonical URL (SEO)

Write:

---
title: "Canonical example"
canonical: "https://example.com/posts/canonical-example/"
---

Data files (common pattern)

If you have src/_data/site.json, you can reference it in templates like site.title.

Example:

---
title: "{{ site.title }}"
---

Back to TOC

Snippets library

New post skeleton (Eleventy + Markdown)

---
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)

Code example section skeleton

### What it does

One sentence.

**Write**:

```md
...your example here...
```

**Rendered**:

...show output here...

Image with caption skeleton

<figure>
  <img src="/images/example.png" alt="Describe the image" />
  <figcaption>Short caption.</figcaption>
</figure>

Back to TOC

Note: "{% raw %} {% endraw %}" is used for this template.