latex-typesetting

--- title: "LaTeX / Scientific Typesetting" description: "Render mathematical notation in the browser with KaTeX" tags: ["media", "math", "typesetting"] difficulty: beginner time_estimate: "30 min" project_directions: ["content-pipeline"] --- # LaTeX / Scientific Typesetting This quest wires **KaTeX** into the Next.js app you built in Module 2.4. KaTeX is a JavaScript library that takes LaTeX source and renders it in the browser — no `pdflatex`, no server, no separate compile step. The page loads and the math appears, typeset. ## Prerequisites - Completed Module 2.4 (Next.js) - Completed Module 2.2 (Claude Code) --- ## Read the docs first Two pages, before touching any code: 1. **KaTeX browser docs** — https://katex.org/docs/browser — how KaTeX is embedded in plain HTML. You'll use a React wrapper instead, but this shows what the underlying library does. 2. **KaTeX supported functions** — https://katex.org/docs/supported — which LaTeX commands KaTeX implements. It's a subset of full LaTeX; worth knowing the boundary. Then ask Claude Code: ``` What's the standard way to use KaTeX in a Next.js app? Are there React wrappers and what are the tradeoffs between them? ``` A "React wrapper" is a package that lets you use KaTeX as a component in your code — so instead of calling the library directly, you write something like `<BlockMath math="E = mc^2" />` in your JSX. Read Claude Code's answer before moving on — you're going to pick one of these packages to install. --- ## Setup Open your Next.js project from Module 2.4 in VS Code. You'll want two terminals open: 1. One running the dev server (`pnpm dev`) 2. One running Claude Code Make sure you can see your app in the browser at `http://localhost:3000` before continuing. If your page is blank or erroring, fix that first — everything in this quest builds on having a working app you can see updating live. --- ## Part 1 — Render your first equation Tell Claude Code which React wrapper you picked from the docs step, and ask it to install the package and add a single rendered equation to your homepage (`app/page.tsx`). One thing to mention in your prompt: KaTeX ships its own stylesheet (a CSS file that controls how the math looks), and it needs to be imported somewhere in your app — usually the top-level layout file. Without it, the symbols show up but the spacing and layout break. Ask Claude Code to handle this too. Save the file and check your browser. The equation should appear typeset, not as raw source. > **If it looks like unstyled text with symbols in the wrong places:** the CSS didn't get imported. Tell Claude Code "the KaTeX styles aren't loading" and it'll find where to add the import. --- ## Part 2 — One formula, properly presented A bare equation isn't very useful without context. Pick a formula you'd want to explain to someone who didn't already know it — from a paper, a course, or a concept you find interesting. Ask Claude Code to add it to your page as a block equation (centered on its own line) with a short paragraph next to it: the name of the formula, what it's for, and what each variable means. When you reference variables in the explanation ("where $x$ is the..."), use inline math so they're typeset consistently with the main equation. The wrapper you installed should support both: - **Block math** — centered on its own line, for the main equation (`$$...$$` style) - **Inline math** — sits inside a sentence, for referencing individual variables (`$...$` style) Most wrappers expose these as two components (`<InlineMath>`, `<BlockMath>`) or one component with a `display` prop. Check the browser. The result should be a single coherent unit of content: equation plus the explanation that makes it legible. This is what you're going to build on. --- ## Part 3 — A component that carries context Look at the code on your homepage — the equation, the title, the explanation. If you wanted to add five more formulas, you'd be copying and pasting a lot of the same structure. This is what components are for. Ask Claude Code to build a `Formula` component at `components/Formula.tsx` that takes: - a title or name (e.g. `"Bayes' theorem"`) - a LaTeX string for the equation itself - a description, rendered as prose underneath — this should itself be able to contain inline math, so variable references in the explanation stay typeset It should render these together as one visual block. Don't worry about making it pretty yet — just get the structure right so you can drop several of them onto a page without the markup getting unwieldy. Then ask Claude Code to refactor your homepage to use `<Formula ... />` in place of the hand-written version from Part 2. The page should look the same in the browser — you've just reorganized the code so adding more formulas is easy. --- ## Part 4 — Build it out Add at least three more formulas to your homepage using the `Formula` component, each with its own writeup. Pick things that are related — formulas from the same area, or that build on each other — so the page reads as a coherent page about *something*, not a grab bag. Once several are rendering side by side, the page will start to feel static. Pick one of these and ask Claude Code to implement it: - Click a formula to expand a longer derivation underneath - A toggle that swaps between a simpler and a more rigorous form of the same equation - Hover over a symbol in the equation and have the corresponding part of the description highlight (or vice versa) You only need one. The point is to make the page do something a printed textbook can't — this is the web, and the content can respond to the reader. --- ## Key Concepts | Concept | What It Means | |---------|--------------| | KaTeX | A JavaScript library that renders LaTeX math in the browser, fast and without a server. Supports most — not all — of LaTeX's math commands. | | React wrapper | A package that exposes KaTeX as React components so you can write `<BlockMath math="..." />` instead of calling the raw library. | | Inline vs. block math | `$...$` sits in the text flow with shrunk limits; `$$...$$` gets its own line with full-sized limits. In a wrapper, usually two components or one with a `display` prop. | | CSS import | KaTeX ships its own stylesheet and needs it imported in the top-level layout. Forgetting this is the most common setup bug. | | Content component | A component like `Formula` that bundles an equation with the context that makes it legible (name, description). The unit of content, not just the markup. |