--- format: typebulb/v1 name: Markdown to PDF --- **code.tsx** ```tsx import React, { useState, useRef, useEffect } from "react"; import { createRoot } from "react-dom/client"; import MarkdownIt from "markdown-it"; import { tasklist } from "@mdit/plugin-tasklist"; import { footnote } from "@mdit/plugin-footnote"; import hljs from "highlight.js/lib/common"; const md = new MarkdownIt({ html: true, breaks: false, linkify: true, typographer: true, // Only tagged fences are highlighted: auto-detect would run every grammar on each keystroke. highlight: (code: string, lang: string) => lang && hljs.getLanguage(lang) ? hljs.highlight(code, { language: lang }).value : "", }) .use(tasklist) .use(footnote); type PageSize = "a4" | "letter"; const PAGE_MM: Record = { a4: { label: "A4", w: 210, h: 297 }, letter: { label: "Letter", w: 215.9, h: 279.4 }, }; const MARGIN_MM = 15; const PX_PER_MM = 96 / 25.4; // The H1's slug names the file: the browser's Save-as-PDF takes the tab title. function deriveTitle(markdown: string): string { const match = markdown.match(/^#\s+(.+)$/m); const raw = match ? match[1] : ""; const slug = raw .toLowerCase() .replace(/[^a-z0-9\s-]/g, "") .trim() .replace(/\s+/g, "-") .slice(0, 60); return slug || "document"; } const DRAFT_KEY = "markdown-to-pdf.draft"; const SPLIT_KEY = "markdown-to-pdf.split"; // Storage throws in the inline sandbox and some private modes: persistence is best-effort. function readStored(key: string): string { try { return localStorage.getItem(key) || ""; } catch { return ""; } } function writeStored(key: string, value: string) { try { localStorage.setItem(key, value); } catch {} } const DEFAULT_MARKDOWN = `# Markdown → PDF A **live preview** PDF tool. Edit on the left, see the rendered output on the right, click the download button when ready. ## Features - Live preview as you type - A4 or Letter pages, with real text and clickable links in the PDF - Syntax-highlighted code blocks, task lists and footnotes[^1] - Runs entirely in your browser: nothing is uploaded ### Example > "The best way to predict the future is to invent it." — Alan Kay \`\`\`ts const sum = (a: number, b: number) => a + b; \`\`\` | Item | Quantity | |--------|----------| | Coffee | 2 | | Tea | 1 | - [x] Write the document - [ ] Download the PDF --- Need a page break? Insert \`
\` where the next page should start. Edit this text to get started, or drop a .md file onto the editor. [^1]: Like this one. `; const App = () => { const [markdown, setMarkdown] = useState(() => readStored(DRAFT_KEY) || DEFAULT_MARKDOWN); const [split, setSplit] = useState(() => Number(readStored(SPLIT_KEY)) || 0.5); // the editor's share of the width const [fitOnePage, setFitOnePage] = useState(false); const [pageSize, setPageSize] = useState("a4"); const previewRef = useRef(null); const fileRef = useRef(null); const workspaceRef = useRef(null); const paneRef = useRef(null); const [paneWidth, setPaneWidth] = useState(0); useEffect(() => writeStored(DRAFT_KEY, markdown), [markdown]); useEffect(() => writeStored(SPLIT_KEY, String(split)), [split]); useEffect(() => { const ro = new ResizeObserver(([entry]) => setPaneWidth(entry.contentRect.width)); ro.observe(paneRef.current!); return () => ro.disconnect(); }, []); const html = md.render(markdown); const page = PAGE_MM[pageSize]; // Fit-to-width: the sheet keeps its real layout width and is only rendered scaled (CSS zoom), // so line breaks match the PDF whatever the pane's width. const previewZoom = paneWidth ? paneWidth / (page.w * PX_PER_MM) : 1; const openFile = async (file: File | undefined) => { if (file) setMarkdown(await file.text()); }; const onSplitDown = (e: React.PointerEvent) => { e.preventDefault(); const handle = e.currentTarget; const box = workspaceRef.current!.getBoundingClientRect(); const rows = handle.offsetWidth > handle.offsetHeight; // stacked layout: the handle is a row handle.setPointerCapture(e.pointerId); const onMove = (pe: PointerEvent) => { const t = rows ? (pe.clientY - box.top) / box.height : (pe.clientX - box.left) / box.width; setSplit(Math.min(0.8, Math.max(0.2, t))); }; const onUp = () => { handle.removeEventListener("pointermove", onMove); handle.removeEventListener("pointerup", onUp); handle.removeEventListener("pointercancel", onUp); document.body.style.cursor = ""; }; document.body.style.cursor = rows ? "row-resize" : "col-resize"; handle.addEventListener("pointermove", onMove); handle.addEventListener("pointerup", onUp); handle.addEventListener("pointercancel", onUp); }; // The browser's own HTML-to-PDF engine does the conversion; the print CSS hides everything but the sheet. const handleDownload = () => { const preview = previewRef.current; if (!preview) return; let zoom = 1; if (fitOnePage) { // Uniform zoom so the sheet's printed height fits one page's printable area. scrollHeight is // in the sheet's own CSS px whatever the preview zoom (rects aren't, across Chromium versions). const contentH = preview.scrollHeight - 2 * MARGIN_MM * PX_PER_MM; const printableH = (page.h - 2 * MARGIN_MM) * PX_PER_MM; if (contentH > printableH) zoom = (printableH / contentH) * 0.99; } document.documentElement.style.setProperty("--print-zoom", String(zoom)); const prevTitle = document.title; document.title = deriveTitle(markdown); window.addEventListener("afterprint", () => { document.title = prevTitle; }, { once: true }); window.print(); }; const ua = navigator.userAgent; const isWebView = (/iPhone|iPad|iPod/i.test(ua) && !ua.includes('Safari')) || /; wv\)/.test(ua); if (isWebView) return (
Your in-app browser can't save PDFs. Please open this page directly in your browser.
); return (

Markdown → PDF

{ openFile(e.target.files?.[0]); e.target.value = ""; }} />