MDX Demo

This page demonstrates MDX support — Markdown with embedded JSX. You can write standard Markdown alongside React components, all rendered at build time.

Syntax Highlighting

Code blocks are powered by rehype-pretty-code with syntax highlighting and line highlight support.

Add {line-numbers} to highlight specific lines. For example, ```ts {3-4,7} highlights lines 3–4 and 7.

// Fibonacci using memoization
function fib(n: number, memo: Map<number, number> = new Map()): number {
  if (n <= 1) return n;
  if (memo.has(n)) return memo.get(n)!;
  const result = fib(n - 1, memo) + fib(n - 2, memo);
  memo.set(n, result);
  return result;
}
 
console.log(fib(10)); // 55

// A simple React counter
import { useState } from "react";
 
export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Clicked {count} times
    </button>
  );
}

Tables

Concept	Description	Complexity
Hash Map	Key-value store with O(1) average lookup	O(1) avg
Binary Search	Halves the search space each step	O(log n)
HyperLogLog	Probabilistic cardinality estimator	O(1) space
Fibonacci (memoized)	Bottom-up or top-down with caching	O(n)

Lists

Things MDX lets you do:

Write Markdown for prose and structure
Import and render React components inline
Use frontmatter for page metadata
Apply rehype plugins for syntax highlighting and more

React Components

You can drop shared components directly into MDX:

This content lives inside the shared Card component, imported at the top of this MDX file and used just like JSX.

LaTeX

Math expressions are rendered with KaTeX via remark-math and rehype-katex.

Use $...$ for inline math and $$...$$ for display blocks.

Inline example: the quadratic formula is $x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ .

Display block:

\sum_{k=1}^{n} k = \frac{n(n+1)}{2}

P(A \mid B) = \frac{P(B \mid A)\, P(A)}{P(B)}

Inline Code

You can reference inline code mid-sentence, or quote a type like Array<Promise<string>> without a full block.