First Post

This is a plain paragraph. It exists mostly so I can see what the body text looks like at a comfortable reading length, with a line long enough to wrap at least once on a normal screen. It has bold text, italic text, strikethrough, and some inline code mixed in.

Here’s a link to another page and an external link for comparison.

#Heading level two

The heading above is an h2. Hovering it should reveal the anchor # in the margin.

#Heading level three

Nested a little deeper.

#Heading level four

And deeper still. Below is a paragraph so the spacing between a heading and its body is visible.

#Blockquote

Blockquotes are for pull quotes and asides.

They can span multiple paragraphs, and still carry inline code and emphasis inside them.

#Lists

An unordered list:

• First item
• Second item, which is a bit longer so it has a chance to wrap onto a second line and show how continuation lines are indented
• Third item with code in it

An ordered list:

1. Install the dependencies
2. Run the dev server
3. Open the browser

A nested list:

• Parent item
  • Child item
  • Another child
    • Grandchild
• Back to the top level

A task list:

• Render markdown
• Style the components
• Write something worth reading

#Code

Inline code looks like const x = 42 in the middle of a sentence.

A fenced block with syntax highlighting:

type Post = {
  slug: string;
  title: string;
  date: string;
};
 
async function getPosts(dir: string): Promise<Post[]> {
  const entries = await readdir(dir, { withFileTypes: true });
 
  const posts = await Promise.all(
    entries
      .filter((entry) => entry.isDirectory())
      .map(async (entry) => {
        const file = await readFile(`${dir}/${entry.name}/index.md`, "utf8");
        const { data } = matter(file);
        return { slug: entry.name, title: data.title, date: data.date };
      }),
  );
 
  return posts.sort((a, b) => Date.parse(b.date) - Date.parse(a.date));
}

A shorter one in a different language:

.prose pre {
  overflow-x: auto;
  border-radius: 12px;
}

And a block with no language, to check the fallback:

$ pnpm dev
   ▲ Next.js
   - Local: http://localhost:3000

#Table

#Horizontal rule

The line below is an hr.

And that’s everything after it.

#Typographic details

Smart quotes should turn “these” into curly ones, and dashes — like this — should become em dashes. Ellipses too…

That’s the whole set.