Markdown & MDX Style Examples

Paragraphs (H2)

I normally wouldn’t publish a style example page like this, but in the interest of transparency, I’m including it.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

This is a new paragraph. Paragraph spacing and line height should feel relaxed and readable for long-form content.

Emphasis and inline text

• Bold text
• Italic text
• Bold italic text
• Strikethrough text
• Inline code such as Astro.props or font-variation-settings.

Here is a sentence with a link to an example.

---

Headings (H2)

Use headings to structure longer essays and technical posts.

Subheading example (H3)

Subheadings should be visually distinct and separated from paragraphs by consistent spacing.

Deeper heading level (H4)

Less common, but should still look good.

---

Lists

Unordered list

• One item
• Another item
  • Nested item
  • Another nested item
• Final item

Ordered list

1. First step
2. Second step
3. Third step
   1. Sub-step
   2. Another sub-step

Task list

• Draft
• Edit
• Publish

---

Quotes

Markdown blockquote

A blockquote should be visibly different from body text.

Multi-paragraph quotes should maintain spacing and alignment.

---

Code

Inline code example: max-w-[var(--measure)]

Plain fenced code

This is a plain code block.
It should have padding and scroll horizontally if long.

JavaScript

export function formatDate(date) {
  return new Intl.DateTimeFormat("en-US", {
    dateStyle: "medium"
  }).format(date);
}

CSS

.h1-fraunces {
  font-variation-settings: "opsz" 104, "wght" 720, "SOFT" 50, "WONK" 0;
}

Astro

---
const { title } = Astro.props;
---
<h1>{title}</h1>

---

Tables

Feature	Default	Notes
Body font	Newsreader	Optimized for long-form reading
Headline font	Fraunces	Expressive serif
UI font	Inter	Used for metadata

---

Images

Markdown image

HTML image

---

Horizontal rule

---

Footnotes

Footnotes can be useful for references.¹

---

Details / Disclosure

Expandable section

This content is hidden by default. It’s useful for tangents, raw notes, or optional details.

• It should inherit body typography.
• It should maintain spacing rhythm.

---

Footnotes

1. This is a sample footnote. ↩