# react-markdown-renderer-integration

**Repository Path**: belovedLYC/react-markdown-renderer-integration

## Basic Information

- **Project Name**: react-markdown-renderer-integration
- **Description**: 一个强大、灵活的 React Markdown 渲染组件，专为开发者打造，具有丰富的扩展功能。
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2025-05-17
- **Last Updated**: 2025-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MarkdownRenderer

A powerful, flexible React Markdown rendering component, specifically designed for developers with rich extension features.

## ✨ Features

- 🚀 Full support for GitHub Flavored Markdown (GFM)
- 🎨 Responsive design, compatible with dark/light modes
- 🔍 Code block syntax highlighting and copy functionality
- 🔢 Support for mathematical formula rendering (KaTeX)
- ✅ Task list support
- 🔄 Automatic processing of mixed HTML content
- 📱 Fully responsive, supports mobile devices
- 🧩 Modular design, easy to extend and customize

## 📦 Installation

```bash
# Using npm
npm install react-markdown-renderer-integration

# Using yarn
yarn add react-markdown-renderer-integration

# Using pnpm
pnpm add react-markdown-renderer-integration
```

## 🚀 Basic Usage

### Method 1: If your project uses TailwindCSS

```tsx
import { MarkdownRenderer } from "react-markdown-renderer-integration";

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

This is a **Markdown** example.

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

| Property | Type | Default |
| ---- | ---- | ------ |
| name | string | - |
| age | number | 0 |
  `;

  return (
    <div className="container mx-auto p-4">
      <MarkdownRenderer content={markdownContent} />
    </div>
  );
}
```

### Method 2: If your project doesn't use TailwindCSS

You need to import an additional style file:

```tsx
import { MarkdownRenderer } from "react-markdown-renderer-integration";
// Import pre-compiled CSS styles
import "react-markdown-renderer-integration/dist/markdown-renderer.css";

function App() {
  const markdownContent = `# Hello World`;

  return <MarkdownRenderer content={markdownContent} />;
}
```

## 📝 Props

| Property    | Type      | Default  | Description                                                   |
| ----------- | --------- | -------- | ------------------------------------------------------------- |
| `content`   | `string`  | Required | Content string in Markdown format                             |
| `allowHtml` | `boolean` | `false`  | Whether to allow HTML rendering (note: XSS risk when enabled) |
| `className` | `string`  | `""`     | Custom CSS class name                                         |

## 🎨 Special Features

### Code Block Highlighting and Copying

Automatically adds syntax highlighting to code blocks and provides one-click copy functionality:

```jsx
const code = `function sayHello() {
  console.log("Hello world!");
}`;

<MarkdownRenderer content={`\`\`\`javascript\n${code}\n\`\`\``} />;
```

### Mathematical Formula Support

Inline formula: $E=mc^2$

Block level formula:

$$
\frac{d}{dx}e^x = e^x
$$

### Task Lists

Supports GitHub-style task lists:

```md
- [x] Completed task
- [ ] Incomplete task
```

## 🛠️ Advanced Usage

### Custom Styling

The MarkdownRenderer component uses Tailwind CSS and inline styles. You can customize the appearance by passing a `className` property or modifying the style definitions within the component:

```tsx
<MarkdownRenderer
  content={markdownContent}
  className="prose-lg prose-blue max-w-none"
/>
```

### Security Considerations

By default, HTML content is sanitized to prevent XSS attacks. If you need to render HTML, use the `allowHtml` property with caution:

```tsx
// Only enable when content source is trusted
<MarkdownRenderer content={trustedContent} allowHtml={true} />
```

## 🧩 Internal Components

MarkdownRenderer internally encapsulates several useful sub-components:

- **CodeBlock**: Provides code highlighting and copying functionality
- **TaskListItem**: Renders task list items

These components can be extracted and used separately as needed.

## 📋 Supported Languages

Code blocks support syntax highlighting for over 40 programming languages, including but not limited to:

- JavaScript/TypeScript
- HTML/CSS
- Python
- Java
- Ruby
- C/C++
- Bash/Shell
- Markdown
- JSON/YAML

## 💡 Usage Tips

1. **Large Document Processing**: The component has built-in optimization logic to handle large documents without affecting performance
2. **Mobile Adaptation**: Tables automatically add horizontal scrolling to ensure proper display on mobile devices
3. **Dark Mode**: Automatically detects and adapts to dark mode, providing an elegant visual experience

## Importing data.md for Syntax Support Testing

You can go to the project's /dist/data.md for testing markdown syntax download

## 📄 License

[MIT License](LICENSE)

---

## 🙏 Acknowledgements

This project is based on the following open source projects:

- [React Markdown](https://github.com/remarkjs/react-markdown)
- [Remark](https://github.com/remarkjs/remark)
- [Rehype](https://github.com/rehypejs/rehype)
- [KaTeX](https://github.com/KaTeX/KaTeX)
- [Syntax Highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)

---

## ✨ Git Repository

-🙏 If you think this plugin is useful, then please give me a star[react-markdown-renderer-integration](https://gitee.com/belovedLYC/react-markdown-renderer-integration)

Made with ❤️ by BelovedLYC