Markfolio Feature Showcase

A single document that exercises every part of the published reading surface. If a section below renders the way it describes, that feature is live.

#The short version

This paragraph is body prose — it should be a clean sans-serif font (not serif), with inline code styled as a chip and links in indigo. Below is an ordinary blockquote (not a callout):

Beautiful link out beats an attachment in. — the whole product thesis.

#What to look for around the page

These appear automatically, no special syntax:

• Table of contents — on a window ≥ 1200px wide, a list of these headings is pinned in the right gutter; the active one highlights as you scroll, and the filter box narrows it.
• Reading-progress bar — a thin indigo bar across the very top that fills as you scroll.
• Copy as HTML — a button in the footer that copies a clean render for pasting into email/docs.
• Heading anchors — hover a heading to reveal a # permalink.

#Lists and tasks

1. Ordered item one
2. Ordered item two
   • nested unordered
   • nested unordered
3. Ordered item three

• Completed task
• Pending task

#Callouts

#Code blocks

A fenced block with a filename label and a copy button:

npx markfolio publish report.md
# → https://mf.io/your-slug

Syntax-highlighted, language label only:

type Deliverable = { markdown: string; slug: string };
const publish = (d: Deliverable): string => `https://mf.io/${d.slug}`;

#Tables

#Math

Inline math renders server-side: the mass–energy relation $E = mc^2$ sits in the text. And a display block:

#Diagram

flowchart LR
  A[Markdown] --> B[Markfolio]
  B --> C[Beautiful link]
  C --> D{Client reads it}
  D -->|loves it| E[Always send drafts this way]

#Collapsible section

#Embeds

Each embed must be a bare URL on its own line. Video thumbnails work immediately; tweet/gist resolve to full cards once the embed_cache migration is run (otherwise they show a clean link card).