My Plaintext Blog

Formatting Demo

| meta | 549 words
TAGS: meta, example, markdown

This post displays every piece of Markdown syntax the theme supports, so you can see how each renders. Delete this file and hello-world.md and add your own writing.

Paragraphs

A blank line starts a new paragraph. A single line break stays in the same paragraph. End a line with a backslash
for a hard break.

Headings

The page title is the only h1. In the post body, ## through ###### all work. Every heading has a literal # marker relative to its level.(aria-hidden, since the heading tag announces the level to screen readers):

Third level

Fourth level

Fifth level
Sixth level

Setext-style headings (=== or --- under a line of text) also work, but this page sticks to ATX syntax.

Emphasis

italic or italic, bold or bold, bold italic, and strikethrough all render normally. Escape a marker with a backslash to print literally: *not italic*.

Inline links and links with a title display as anchors. A URL in angle brackets autolinks, https://www.11ty.dev/ as do email addresses, mail@example.com.

Reference-style links work too, see the 11ty docs.

A bare URL like https://example.com is not linkified (linkify is off), so wrap in <> if you want it clickable.

Images

Images are not embedded. ![a red fox in snow](/assets/fox.jpg) renders as a plain link to the image file:

[image: a red fox in snow]

An image with no alt text becomes just [image]:

[image]

Lists

Unordered, nested (-, *, and + markers are equivalent):

Ordered (1. or 1) delimiters both work):

  1. first
  2. second
  3. third

Blockquotes

A quoted paragraph gets a literal "> " prefix on top of the usual indentation, the way a plain-text quote looks in email.

Multi-paragraph quotes work.

Nested quotes

go deeper.

Blockquotes can contain any other block element:

and inline code

Code

Inline code like const x = 1 and fenced blocks get a faint background tint. Fence with triple backticks and an optional language hint:

function wordCount(html) {
  const text = html.replace(/<[^>]+>/g, " ");
  return (text.match(/\S+/g) || []).length;
}

Tilde fences work too:

a fenced block with no language

For a literal backtick inside inline code, fence with double backticks: `like this`.

Tables

Tables scroll horizontally inside their own box instead of going past the width of the viewport, and support column alignment:

Feature Syntax Result
left align :--- left
centered :---: center
right align ---: right

Horizontal rules

---, ***, or ___ on its own line displays as a clipped full-width rule:

Raw HTML

html: false in set in the markdown-it config, and so raw markup prints literally instead of executing: <em>this stays as text</em>. To actually italicize, use asterisks.

Likewise, Nunjucks templating is disabled in post bodies (markdownTemplateEngine: false), so {{ 2 + 2 }} stays literal instead of evaluating.

ASCII punctuation

Typographic punctuation in source pages and posts are normalized to ASCII at render time. This means "curly quotes", em--dashes, en-dashes, and ellipsis... all render as regular ", --, -, and .... Code spans and URLs are not normalized.