Every element on one page

This one sets out everything that renders. Bold, italic, both, struck through, inline code, a link within the site, a link outside it, an autolink https://example.com.

Heading levels

The body starts at ##; # belongs to the title in the front matter.

Third level

Fourth level

Fifth level

Sixth level

Paragraphs and line breaks

An ordinary paragraph. The line below ends in two spaces, so it breaks where it is told to.
This is the second line of that break, still inside the same paragraph.

And this is a new paragraph.

Inline formatting

<kbd> is for keys, so ⌘ + K is written as keyboard elements rather than as text. Subscripts give H₂O and superscripts give x². Highlights use mark, and an abbreviation can carry its expansion: CDN.

Emoji shortcodes render too: ✨ 👋 🚀

Lists

Unordered, two levels deep:

• The first item
• The second, long enough that it has to wrap, which is how the hanging indent under a wrapped line gets checked
  • Nested once
  • Nested twice
    • Nested again
• The third

Ordered, starting at 3:

3. Third
4. Fourth
   1. Sub-step one
   2. Sub-step two
5. Fifth

A task list:

• Something already done
• Another finished thing
• Not yet
• Not this either

Quotes

A single paragraph.

A quote can hold a second paragraph, and inline formatting, and code.

A nested quote:

The inner one.

Back to the outer.

Code

TypeScript, with a filename:

import { defineContentConfig, defineCollection, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    writing: defineCollection({
      type: 'page',
      source: 'writing/*.md',
      schema: z.object({
        title: z.string(),
        date: z.string(),
        description: z.string().optional(),
      }),
    }),
  },
})

A deliberately long line, to confirm that a code block scrolls within its own box rather than widening the page:

nuxt generate --preset=static --no-experimental-json-payload --log-level=verbose --dir=/tmp/out --dotenv=.env.production.local

No language, so it is drawn as plain monospace:

plain text
and a second line

Tables

Pictures

A narrow one, smaller than the column and so left at its own size:

A full-width one, which opens larger:

A very wide one:

A portrait:

A square:

And small in the middle of a sentence: the words carry on after it.

A rule

That was a --- above.

Notes

A note is written with the words it explains, so the sentence reads as it would without it and the note can say what it is about:

:fn[the words]{is="what they mean"}

So :fn directive¹ attaches to anything — code² included, and something emphasised³. The note itself is written out at the foot of the article, where a phrase⁴ opens it, and the whole explanation links back to the words.

Several notes in one paragraph collect in the order they are written: first⁵ and second⁶.

There are enough of them in this article to fill the fold, which shows five⁷ and a line of the sixth before the rest are folded away. Opening it⁸ is what the control under them does.

Raw HTML