Markdown Showcase

A single page that exercises every visual element, so each theme can be judged fairly.

Text & inline

Regular paragraph with bold, italic, strikethrough, inline code, and an external link. Internal: getting-started. Highlight: important phrase.

Callouts

Note

Neutral information block.

Tip

A helpful suggestion.

Warning

Something to be careful about.

Danger

Critical, do not ignore.

Collapsible callouts

Collapsed by default (click to expand)

Use [!type]- — the callout starts folded. Good for FAQs and long asides.

Expanded but foldable

Use [!type]+ — starts open, but the user can collapse it.

Code

interface ThemeConfig {
  name: string
  accent: string
}
 
const themes: ThemeConfig[] = [
  { name: "shadcn", accent: "#18181b" },
  { name: "terminal", accent: "#2dd4bf" },
]
 
export const resolve = (n: string) => themes.find((t) => t.name === n)

git push origin main   # triggers the GitHub Pages deploy

Table

Theme	Mode	Accent
shadcn	both	near-black
sepia	both	amber
terminal	dark	cyan/green
notion	both	slate-blue

Lists

• Top level

  • Nested item
  • Another nested

• Back to top

  1. Ordered child
  2. Second child

• Unchecked task

• Completed task

Math

Inline $e^{i\pi }+1=0$ and a block:

$${\int }_{-\infty }^{\infty }{e}^{-x^2}dx=\sqrt{\pi }$$

Quote

“Make it work, make it right, make it fast.” — Kent Beck

See also architecture and back to home.

showcase