open-index/open-npm huggingface dataset:
npm package: @ootc/markdown
Description: React components for markdown rendering and editing.
Latest version: 0.0.9

# @ootc/markdown

React components for markdown rendering and editing.

## Install

```bash
pnpm add @ootc/markdown
```

## Usage

```tsx
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`).

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

Component-level override:

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

React example:

```tsx
import {useEffect} from 'react';

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

  return null;
}
```

## Development

```bash
pnpm dev
```

```bash
pnpm demo:build
pnpm demo:preview
```

```bash
pnpm build
```