leetcode/Docs/typeset-prompt.md

Install shadcn/typeset in this Fumapress (Fumadocs + Waku) project.

Typeset is a single stylesheet that styles rendered markdown: wrap the output in a typeset container and everything inside (headings, lists, tables, code, blockquotes, math) is styled. Everything outside is untouched.

If this project was scaffolded with create-fumapress-typeset, steps 1-4 are already done — verify each one and move on; every step below is safe to re-run.

1. Download https://ui.shadcn.com/typeset.css and save it as src/typeset.css (next to the main CSS file, src/app.css). If the file already exists, replace it with the downloaded copy.

2. Import it in src/app.css, after the Tailwind and Fumadocs imports:

   @import "./typeset.css";

3. Install the fonts:

   bun add @fontsource-variable/dm-sans @fontsource-variable/instrument-sans @fontsource-variable/jetbrains-mono

   Then import them in src/app.css:

   @import "@fontsource-variable/dm-sans"; @import "@fontsource-variable/instrument-sans"; @import "@fontsource-variable/jetbrains-mono";

   :root { --font-dm-sans: "DM Sans Variable", sans-serif; --font-instrument-sans: "Instrument Sans Variable", sans-serif; --font-jetbrains-mono: "JetBrains Mono Variable", monospace; }

4. Add this preset to src/app.css, after the typeset import. If a class named .typeset-docs already exists, update its values in place. Leave any other typeset-* presets untouched: they are separate surfaces:

   .typeset-docs { --typeset-font-body: var(--font-instrument-sans); --typeset-font-heading: var(--font-dm-sans); --typeset-font-mono: var(--font-jetbrains-mono); --typeset-size: 16px; --typeset-leading: 1.9; --typeset-flow: 1em; }

5. Do not apply the class anywhere yet. Search the project for surfaces that render markdown or rich content:

   • The Fumadocs docs page body. Fumapress owns that layout: customize it in press.config.tsx with createDocsLayoutPage from "fumapress/layouts/docs" (see https://press.fumadocs.dev/docs/layouts) and wrap the page body there.
   • MDX components, react-markdown/Streamdown renderers, dangerouslySetInnerHTML with parsed markdown, prose classes, CMS content renderers.

   Present the candidates you find as a short list and ask the user which surface should use typeset. Then wrap only the surface they pick:

   {content}

   (src/app.css also defines .typeset-measure with the same max-width, if a plain class is preferred over a Tailwind utility.)

   If the picked surface already has its own typography (Fumadocs' prose class, styled markdown components), list those styles and let the user decide what to remove before wrapping. Note: src/app.css already zeroes margin-block-end inside .typeset.prose so typeset owns the rhythm when both classes share a container.

Notes:

• To exclude an embedded component from typeset styles, add the not-typeset class or the data-not-typeset attribute to it. Keep interactive Fumadocs components (tabs, callouts, accordions) out of typeset this way.
• Verify on the surface the user picked: headings, lists, tables, and code inside the container should be styled with no classes on the content itself.
• Docs: https://ui.shadcn.com/docs/typeset