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

# 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

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:

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

🎨 Special Features

Code Block Highlighting and Copying

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

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:

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

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

// 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

🙏 Acknowledgements

This project is based on the following open source projects:

• React Markdown
• Remark
• Rehype
• KaTeX
• Syntax Highlighter

✨ Git Repository

-🙏 If you think this plugin is useful, then please give me a starreact-markdown-renderer-integration

Made with ❤️ by BelovedLYC