@richmd/react
v3.0.4
Published
It is a react package of Richmd.
Maintainers
nappaReadme
@richmd/react
React component for Richmd - a tool for creating rich content with Markdown.
Installation
# Using npm
npm install @richmd/react
# Using yarn
yarn add @richmd/react
# Using pnpm
pnpm add @richmd/reactUsage with Next.js (App Router)
1. Import CSS in your root layout
First, import the required CSS in your root layout file (app/layout.tsx):
import "@richmd/react/dist/richmd.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}2. Use the Richmd component in your pages or components
Since the Richmd component uses client-side features, you need to use the "use client" directive when using it in your pages or components:
"use client";
import { Richmd } from "@richmd/react";
export default function MyPage() {
const markdownText = `# Hello, Richmd!
This is a **bold text** and *italic text*.
## Features
- Rich markdown support
- Easy to use
- Customizable
\`\`\`js
// Code block example
const hello = "world";
console.log(hello);
\`\`\`
> Blockquote example
| Table | Example |
|-------|---------|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
`;
return (
<div className="container">
<Richmd text={markdownText} className="markdown-content" />
</div>
);
}3. Create a markdown editor (optional)
You can create a simple markdown editor with live preview:
"use client";
import { useState } from "react";
import { Richmd } from "@richmd/react";
export default function MarkdownEditor() {
const [text, setMarkdown] = useState('# Start typing here...');
return (
<div className="flex flex-col md:flex-row gap-4">
<div className="w-full md:w-1/2">
<textarea
className="w-full h-[500px] p-4 border rounded"
value={text}
onChange={(e) => setMarkdown(e.target.value)}
/>
</div>
<div className="w-full md:w-1/2 border rounded p-4">
<Richmd text={text} className="prose" />
</div>
</div>
);
}4. Use the RichmdSlide component (optional)
You can use the RichmdSlide component to create slide-style Markdown presentations. Here's an example:
"use client";
import { RichmdSlide } from "@richmd/react";
const md = `:use slide:
:---:title.sunset
# title
subtext
:---:
# title
:<--:content.sunset
# Subtitle
subtext
*subtext*
:---:
:<--:content.sunset
# List
- List
- List
- List
- List
- List
- List
:---:
:<--:content.sunset
# Text
===info
testtest
===
\`\`\`js
const a = 1;
console.log(a);
\`\`\`
$$
f(x) = x^2 + x + 2
$$
:---:
`;
export default function SlideShow() {
return (
<RichmdSlide text={md} isController={true} />
);
}Setting the isController property to true enables the slide controller.
Component API
Richmd
The Richmd component accepts the following props:
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| text | string | Yes | The markdown text to render |
| id | string | No | HTML id attribute for the container div |
| className | string | No | CSS class name for the container div |
RichmdSlide
The RichmdSlide component accepts the following props:
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| text | string | Yes | The markdown text to render |
| isController | boolean | No | Toggles the display of the slide controller |
| pdfDownload | boolean | No | Switching to PDF distribution mode. (Default: false) |
Supported Markdown Features
Richmd supports a wide range of markdown features:
- Basic formatting (bold, italic, strikethrough)
- Headings (h1-h6)
- Lists (ordered and unordered)
- Checkbox lists
- Code blocks with syntax highlighting
- Blockquotes
- Tables
- Horizontal rules
- Links and images
- TeX syntax (using KaTeX)
- Color inline blocks
- Dropdown details
- Video (HTML5 video tag)
- Custom HTML tags
For detailed syntax documentation, refer to the Richmd Markdown Syntax Documentation.
License
MIT