Markdown Showcase

This page exercises every markdown and MDC feature available to notes. Keep it around — it doubles as a rendering test after any styling change.

Text formatting

Prose supports bold, italic, ~~strikethrough~~, inline code, and internal links. Press K to search at any time.

Blockquotes read like a quiet aside — good for definitions or a memorable line.

Unordered lists
With several items
- And nested children
Back to the top level

Ordered steps
Follow in sequence
Until done

Callouts

Four semantic callouts cover the situations worth flagging.

A neutral aside — extra context that isn't critical.

A shortcut or best practice that saves time.

Something to watch out for before it bites you.

A genuinely destructive or irreversible action.

Code

Fenced blocks get syntax highlighting, an optional filename, line highlights, and a copy button — in both light and dark themes.

server/api/hello.ts

export default defineEventHandler((event) => {
  const name = getQuery(event).name ?? 'world'
  return { message: `hello, ${name}` }
})

A PHP block, to confirm non-default languages highlight:

app/Models/User.php

<?php

namespace App\Models;

class User extends Authenticatable
{
    protected $fillable = ['name', 'email', 'password'];
}

Code groups

Tabbed code for showing the same task across tools:

npm install @nuxt/content

pnpm add @nuxt/content

bun add @nuxt/content

Tabs

Tabs group related content that the reader only needs one of at a time.

Collapsible sections

Steps

Install the dependency

Add the package to your project.

Configure the module

Restart the dev server

Changes to modules require a fresh start.

Tables

Command	Description	Reversible
`git status`	Show the working tree state	—
`git add`	Stage changes for commit	Yes
`git commit`	Record staged changes	Yes
`git push`	Publish commits to the remote	Hard

Badges

Inline status markers: stable beta deprecated

Diagrams

Fenced mermaid blocks render as diagrams that follow the current theme.

flowchart LR
  A[Write note] --> B{Has frontmatter?}
  B -->|Yes| C[Parse + index]
  B -->|No| D[Skip]
  C --> E[Prerender static HTML]
  E --> F[Instant search]

A sequence diagram works too:

sequenceDiagram
  participant R as Reader
  participant S as Static site
  R->>S: Request /dev/nuxt/rendering-modes
  S-->>R: Prerendered HTML
  R->>R: Hydrate + load search index

Video

Embed a video responsively without writing raw iframe markup: