Markdown Test

Testing

Math

Inline: $E = mc^2$ and $\sqrt{b^2 - 4ac}$

Block:

$$ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$

$$ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$

Mermaid

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug it]
    D --> B

  sequenceDiagram
      Browser->>Worker: markdown string
      Worker->>Worker: unified pipeline
      Worker-->>Browser: rendered HTML
      Browser->>Browser: processMath + processMermaid

Tables | Feature | Status | Sprint | | ------------ | ------- | ------ | | Editor | ✅ Done | 1 | | Widgets | ✅ Done | 2 | | Math | ✅ Done | 2 | | Mermaid | ✅ Done | 2 | | Editor modes | 🔜 Next | 3 |

Task Lists

• Install CodeMirror 6

• Build markdown worker

• Add mermaid rendering

• Add KaTeX math

• Focus mode extension

• Hemingway mode extension

  ---

  Footnotes

  The unified pipeline¹ handles all transformations. KaTeX² renders math on the main thread.

Code blocks

async function processMarkdown(markdown: string) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkMath)
    .use(remarkRehype)
    .use(rehypeShiki)
    .use(rehypeSanitize)
    .use(rehypeStringify)
    .process(markdown);
  return String(result);
}

def fibonacci(n: int) -> list[int]:
     a, b = 0, 1
     return [a := a + b, b := a + b][0] if n else []

What to verify:

• Math — inline formulas render with KaTeX (not raw $...$ text), block formulas are centered
• Mermaid — both diagrams render as SVGs (may take a second on first load)
• Copy button — hover any code block, a copy icon appears top-right
• Language label — typescript / python / mermaid label top-left of each block
• Footnotes — superscript numbers link down to definitions at the bottom
• Task list — checkboxes render (checked + unchecked)
• Table — styled with design token borders, yellow header text

  ---

  1. Built with remark-parse, remark-gfm, remark-math, rehype-shiki, and rehype-sanitize. ↩
  2. KaTeX is excluded from the worker because it accesses document at module load time. ↩