@ootc/markdown

React components for markdown rendering and editing.

Install

pnpm add @ootc/markdown

Usage

import {CodeBlock} from '@ootc/markdown/code';
import {MarkdownPreview} from '@ootc/markdown/preview';
import {MarkdownEditor} from '@ootc/markdown/editor';
import '@ootc/markdown/style.css';

export default function Demo() {
  return (
    <div style={{display: 'grid', gap: 16}}>
      <MarkdownPreview content={'# Hello\n\n```ts\nconst x = 1;\n```'} />
      <CodeBlock code={'console.log("hi")'} language="ts" />
      <MarkdownEditor value={'# Edit me'} onChange={() => {}} />
    </div>
  );
}

Entrypoints

• @ootc/markdown: minimal surface for code rendering primitives
• @ootc/markdown/code: CodeBlock
• @ootc/markdown/preview: MarkdownPreview
• @ootc/markdown/editor: MarkdownEditor

@ootc/markdown/preview lazy-loads Mermaid only when a rendered document contains a mermaid code fence.

MarkdownPreview

Props:

• content: string
• compact?: boolean
• theme?: "system" | "light" | "dark" (default: "system")

compact removes default spacing and reduces vertical rhythm for tighter layouts.

Supports:

• GFM (tables, strikethrough, task lists)
• Math via KaTeX
• Mermaid code blocks (language="mermaid")

MarkdownEditor

Props:

• value: string
• onChange: (next: string) => void
• mode?: "side-by-side" | "tabbed"
• showPreview?: boolean
• theme?: "system" | "light" | "dark" (default: "system")
• id?: string
• placeholder?: string
• disabled?: boolean
• rows?: number
• className?: string

CodeBlock

Props:

• code: string
• language: string
• className?: string
• theme?: "system" | "light" | "dark" (default: "system")

Styles

This package ships CSS modules. The preview also imports KaTeX styles internally.

Dark Mode

The components support both light and dark themes.

• Global switch: set data-theme on document.documentElement.
• Local override: pass theme="light" or theme="dark" to a component.
• Default behavior is theme="system" (follows global data-theme, otherwise prefers-color-scheme).

document.documentElement.setAttribute('data-theme', 'dark'); // or 'light'

Component-level override:

<MarkdownPreview content={markdown} theme="dark" />
<MarkdownEditor value={value} onChange={setValue} theme="light" />
<CodeBlock code={code} language="ts" theme="dark" />

React example:

import {useEffect} from 'react';

function ThemeSync({theme}: {theme: 'light' | 'dark'}) {
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return null;
}

Development

pnpm dev

pnpm demo:build
pnpm demo:preview

pnpm build