components / prose

prose.

markdown renderer with the justin06lee.dev prose styling — GFM, KaTeX math, heading slugs, and syntax-highlighted code blocks (via code-block). dark-only. pass markdown as the string child.

heading

prose renders markdown with the justin06lee.dev styling — links, lists, and inline code.

gfm tables and lists
math via katex: $e^{i\pi} + 1 = 0$

const cn = (...x: string[]) => x.join(" ");

blockquotes, too.

installation

bunx @justin06lee/chrome@latest add prose

props

name	type	default	description
children *	string	-	markdown source.
imageBaseUrl	string	-	prefix for relative image srcs.
lineSync	boolean	false	stamp each top-level block with data-source-line for editor↔preview scroll/highlight sync. zero overhead when off.
highlightLine	number \| null	null	1-based source line whose block is marked with data-sync-highlight. requires lineSync.
linkComponent	React.ElementType	"a"	anchor component for internal links (relative, /…, #…) — pass your router's link for client-side navigation. external links (http(s)://, mailto:, …) always render a plain <a>; http(s) opens in a new tab.
imageTheme	"light" \| "dark"	"light"	which variant to render for images with a light/dark pair (files named <name>-light.<ext> / <name>-dark.<ext>). a -light/-dark-suffixed src resolves to this theme; unsuffixed srcs are untouched. defaults to light; a dark site passes "dark". the exported resolveThemeImageSrc(src, theme) helper does the swap.
resolveImageSrc	(src: string) => string	-	escape hatch mapping each image src to what's rendered. runs after imageBaseUrl and imageTheme resolution.