The Kitchen Sink

This post exists to be thorough on purpose. It throws every kind of content at Typeset so you can see how each one renders. If something here looks broken, that is a bug in the theme, not the content.

Inline semantics

You can have bold, italic, both, struck through, and inline code. You can mark things like this, abbreviate HTML, use keyboard keys like Cmd + K, and add footnotes¹ or a longer one².

Headings descend

This is an h3

It sits below the h2 above and above the h4 below.

This is an h4

This is an h5, a small uppercase-ish label

This is an h6, an even smaller label

Lists

Unordered:

• First item
• Second item with a nested list
  • Nested once
  • Nested again
    • Three levels deep
• Back to the top level

Ordered:

1. Read the post
2. Try the code
3. Notice the details

Task lists

• Set up the design tokens
• Render markdown with Typeset
• Add math support
• Ship it

Blockquotes

A blockquote is a way to borrow someone else's words without borrowing their formatting.

It can span multiple paragraphs and even contain a list:

• one
• two

Code

Inline code: const x = 42. A block:

type Post = {
  slug: string;
  title: string;
  date: string;
};

function isPublished(post: Post): boolean {
  return Boolean(post.date);
}

A shell block:

npm install
npm run dev

Math

Inline math: the area of a circle is $A = \pi r^2$. A display equation:

$$\int_{0}^{\infty} e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}$$

And Euler's identity, for the ceremony:

$$e^{i\pi} + 1 = 0$$

Tables

A wider table that should scroll horizontally on small screens:

Links

A plain link and an autolink: https://oklch.fyi.

Images

An image with a caption via figure semantics:

Dividers

A horizontal rule separates sections:

---

Everything after the rule is its own section.

Disclosure

Click to reveal a secret

Hidden content lives here. Useful for FAQs and long examples you do not want to flood the page with.

Definition list

Typeset

A markdown styling layer you own.

OKLCH

A perceptually uniform color space.

Footnotes

That is everything. If it all reads cleanly, the theme is doing its job.

Footnotes

1. A footnote is a small note at the bottom of the page. ↩

2. A longer footnote with multiple words, so you can see how it wraps when it has something to say that takes more than a single line to express. ↩