@react-ljk-md/markdown-component

A feature-rich Markdown renderer component for React 19, extracted from NextChat.

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

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

Or with pnpm:

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

Or with yarn:

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

Peer Dependencies

This package requires React 19.1.0 or later:

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

Usage

Basic Usage

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

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:

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

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

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

Mermaid Diagrams

```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:

.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:

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

Or use CSS media query for automatic dark mode detection:

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

Development

# 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, a cross-platform AI chat application.