` fallback is output inside a `.md-mermaid` container with `data-mermaid-code` for later hydration.\n\n## API\n\n### `` (default export)\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `markdown` | `string` | required | Markdown content to render |\n| `className` | `string` | `undefined` | CSS class applied to the wrapper ` ` |\n| `onRunCode` | `(code: string, language: string) => Promise` | `undefined` | Callback for executing code blocks |\n| `executableLanguages` | `string[]` | `[\"python\", \"r\"]` | Languages that get a \"Run\" button |\n\n### `CodeExecutionResult`\n\n```ts\ninterface CodeExecutionResult {\n output: string;\n error?: string;\n images?: string[]; // data URIs or URLs\n}\n```\n\n### `renderMarkdownToHtml(markdown: string, options?: { executableLanguages?: string[] }): string`\n\nRenders markdown to an HTML string. Works without React (server-side, emails, PDFs).\n\n### `normalizeMathMarkdownDelimiters(markdown: string): string`\n\nNormalizes `\\(...\\)` to `$...$` and `\\[...\\]` to `$$...$$`. Converts inline `$$...$$` to `$...$`. Leaves code fences untouched.\n\n### `MATH_MARKDOWN_RULES_APPENDIX: string`\n\nA plain-text string with math formatting rules to append to LLM system prompts.\n\n## Theming with Tailwind CSS\n\nThe `className` prop sets a class on the outer wrapper ` `, which you can use as a scoping selector for custom themes.\n\n```tsx\n\n```\n\nThis renders:\n\n```html\n \n\n```\n\n### Creating a theme file\n\nCreate a CSS file (e.g. `markdown-theme.css`) that uses descendant selectors scoped to your theme class. With Tailwind, use `@apply` for utility-based styling:\n\n```css\n/* markdown-theme.css */\n\n.my-theme h1 {\n @apply text-3xl font-bold mt-8 mb-4 text-gray-900;\n}\n\n.my-theme h2 {\n @apply text-2xl font-semibold mt-6 mb-3 text-gray-800;\n}\n\n.my-theme p {\n @apply text-base leading-7 mb-4 text-gray-700;\n}\n\n.my-theme code {\n @apply bg-gray-100 text-sm px-1.5 py-0.5 rounded font-mono;\n}\n\n.my-theme pre {\n @apply rounded-lg my-4 overflow-x-auto;\n}\n\n.my-theme .md-callout {\n @apply border-l-4 border-blue-400 bg-blue-50 px-4 py-3 my-4 rounded-r-lg;\n}\n\n.my-theme table {\n @apply w-full border-collapse my-4 text-sm;\n}\n\n.my-theme th {\n @apply bg-gray-50 font-semibold text-left px-3 py-2 border border-gray-200;\n}\n\n.my-theme td {\n @apply px-3 py-2 border border-gray-200;\n}\n```\n\nImport the theme file in your app and pass the matching class name:\n\n```tsx\nimport \"./markdown-theme.css\";\n\n...
\n...
\n...\n \n\n```\n\n### Semantic CSS classes\n\nThe renderer outputs these classes that you can target in your theme:\n\n| Class | Element |\n|-------|---------|\n| `md-callout` | Callout/admonition blocks (`> [!NOTE]`, etc.) |\n| `md-code-block` | Executable code block wrapper |\n| `md-code-block-header` | Header bar above executable code blocks |\n| `md-code-output` | Code execution output area |\n| `md-code-error` | Code execution error output |\n| `md-mermaid` | Mermaid diagram container |\n| `md-run-btn` | \"Run\" button on executable code blocks |\n\n### Works with server-side rendering\n\n`renderMarkdownToHtml()` produces the same HTML structure (wrapped in ` `), so the same theme CSS applies to both client and server-rendered output. For server rendering, scope your selectors to the `prose` class or add a wrapper with your theme class:\n\n```ts\nconst html = renderMarkdownToHtml(content);\nconst themed = `${html}`;\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}