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.

Blocks and inline notes

A repository, as a card — nothing is fetched, the markdown says what it says:

A term can carry a note in place — :tn[the words]{note="…"} — which is the counterpart of :fn rather than a replacement for it: :fn takes the note out of the sentence and collects it at the foot, and this keeps it here. So mach_vm_protect is glossed where a reader meets it.

A drawing takes the column's width, and pressing it opens it in the same viewer as every other picture. An SVG named in app/assets/svg/ is inlined, so its nodes take the theme and the hover; anything else stays an <img>.

A quadrant plots labeled cards against two axes. Each item is its own block, closed on its own line, and the figure scrolls sideways rather than shrinking:

Inline forms of the same kind:

the answer is 42 — hover or focus lifts the fog. A run that only a narrow page sees is narrow; one a phone drops is wide; one that never breaks is a label that stays on one line. An inline link with its destination's mark is (opens in a new tab)GitHub.

A picture with a caption is the same picture the Markdown renderer makes:

A link card, a crate and a post:

A link card, example.com, opens in a new tab

Another article can be quoted whole:

const hello = (name: string) => `Hello, ${name}!`
console.log(hello('Cloudflare'))

A fenced block can be a table read back (tokei), a diagram drawn in the browser (mermaid), or code that starts folded:

flowchart LR
  A[source] --> B[compiler] --> C[binary]

// A block that starts folded. The author asks for the fold with
// `default="collapsed"`; a fence without it is never folded, however long.
const lines = Array.from({ length: 40 }, (_, index) => index)
console.log(lines.filter(line => line % 2 === 0).length)

Raw HTML