npm package: @react-ljk-md/markdown-component
Description: A feature-rich Markdown renderer component for React 19
Author: react-ljk-md
Latest version: 1.0.0

# @react-ljk-md/markdown-component

A feature-rich Markdown renderer component for React 19, extracted from [NextChat](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web).

## Features

- ✅ **GitHub Flavored Markdown (GFM)** support
- ✅ **Math formulas** rendering with KaTeX
- ✅ **Syntax highlighting** for code blocks with Highlight.js
- ✅ **Mermaid diagrams** support
- ✅ **Code folding** for long code blocks
- ✅ **Copy code button** with hover effect
- ✅ **Dark/Light theme** support
- ✅ **Responsive design**
- ✅ **TypeScript** support
- ✅ **React 19** compatible
- ✅ **Customizable** styling and behavior

## Installation

```bash
npm install @react-ljk-md/markdown-component
```

Or with pnpm:

```bash
pnpm add @react-ljk-md/markdown-component
```

Or with yarn:

```bash
yarn add @react-ljk-md/markdown-component
```

### Peer Dependencies

This package requires React 19.1.0 or later:

```bash
npm install react@^19.1.0 react-dom@^19.1.0
```

## Usage

### Basic Usage

```tsx
import { Markdown } from "@react-ljk-md/markdown-component"

function App() {
  const content = `# Hello World

This is **bold** and *italic* text.

\`\`\`javascript
console.log("Hello, World!");
\`\`\`
`

  return <Markdown content={content} />
}
```

### Advanced Usage

```tsx
import { Markdown } from "@react-ljk-md/markdown-component"

function App() {
  return (
    <Markdown
      content="# Your Markdown Content"
      fontSize={16}
      fontFamily="Monaco, monospace"
      enableCodeFold={true}
      className="custom-markdown"
      style={{ maxWidth: "800px" }}
    />
  )
}
```

### Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `content` | `string` | - | The Markdown content to render (required) |
| `fontSize` | `number` | `14` | Font size in pixels |
| `fontFamily` | `string` | `"inherit"` | Font family for the rendered content |
| `enableCodeFold` | `boolean` | `true` | Enable code folding for long code blocks |
| `loading` | `boolean` | `false` | Show loading state |
| `className` | `string` | - | Additional CSS class name |
| `style` | `React.CSSProperties` | - | Additional inline styles |

### Sub-Components

You can also use individual sub-components:

```tsx
import {
  MarkdownContent,
  Mermaid,
  PreCode,
  CustomCode
} from "@react-ljk-md/markdown-component"

// Use just the Markdown content renderer without the wrapper
<MarkdownContent content="Your markdown here" />

// Render a Mermaid diagram
<Mermaid code="graph TD; A-->B;" />

// Custom code block with folding
<PreCode><code>Your code here</code></PreCode>
```

### Hooks and Utilities

```tsx
import { useWindowSize, copyToClipboard } from "@react-ljk-md/markdown-component"

// Get window size
const { width, height } = useWindowSize()

// Copy text to clipboard
await copyToClipboard("Text to copy")
```

## Supported Markdown Features

### Math Formulas (KaTeX)

Inline math: `$E = mc^2$`

Block math:
```
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
```

### Code Blocks with Syntax Highlighting

````markdown
```javascript
function hello() {
  console.log("Hello, World!");
}
```
````

### Mermaid Diagrams

````markdown
```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
```
````

### Tables

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |

### Task Lists

- [x] Completed task
- [ ] Pending task

### Blockquotes

> This is a blockquote
> > Nested blockquote

## Styling

The component uses CSS variables for theming. You can customize colors by overriding these variables:

```css
.markdown-body {
  --color-fg-default: #24292f;
  --color-accent-fg: #0969da;
  --color-border-default: #d0d7de;
  /* ... more variables */
}
```

### Dark Mode

The component supports dark mode via CSS. Add the `dark` class to the parent element:

```html
<div class="dark">
  <Markdown content="..." />
</div>
```

Or use CSS media query for automatic dark mode detection:

```css
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode variables */
  }
}
```

## Development

```bash
# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## Project Structure

```
src/
├── components/
│   ├── Markdown.tsx       # Main Markdown component
│   └── index.ts           # Component exports
├── hooks/
│   └── useWindowSize.ts   # Window size hook
├── utils/
│   └── copyToClipboard.ts # Clipboard utility
├── styles/
│   ├── markdown.scss      # Main styles
│   ├── highlight.scss     # Syntax highlight styles
│   └── example.scss       # Demo page styles
└── index.ts               # Main entry point
```

## Dependencies

- **react-markdown** - Markdown parser
- **remark-math** - Math plugin
- **remark-breaks** - Line breaks
- **remark-gfm** - GitHub Flavored Markdown
- **rehype-katex** - KaTeX math rendering
- **rehype-highlight** - Code syntax highlighting
- **katex** - Math rendering library
- **highlight.js** - Syntax highlighting library
- **mermaid** - Diagram rendering
- **use-debounce** - Debounce hook
- **clsx** - Class name utility

## License

MIT

## Credits

Extracted from [NextChat](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web), a cross-platform AI chat application.