@aiquants/markdown

Advanced Markdown renderer for React with support for various extensions and custom components.

Features

• Rich Markdown Support: Full support for CommonMark, GitHub Flavored Markdown (GFM), and Math expressions
• Custom Extensions: Twitter embeds, YouTube embeds, Zenn-style messages, and more
• Syntax Highlighting: Code blocks with Shiki syntax highlighting
• Footnotes: Full footnote support with back-links
• Custom Components: Extensible component system for custom rendering
• TypeScript: Full TypeScript support with comprehensive type definitions

Installation

npm install @aiquants/markdown
# or
pnpm add @aiquants/markdown
# or
yarn add @aiquants/markdown

Usage

Basic Usage

import { MarkdownRenderer, parseMarkdown } from "@aiquants/markdown"
import "@aiquants/markdown/css"

const MyComponent = async () => {
  const markdownText = `# Hello World

This is a **bold** text with some \`inline code\`.

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

`

  const rootNode = await parseMarkdown(markdownText, "/path/to/file.md")

  return <MarkdownRenderer rootNode={rootNode} iFrameAllowedDomains={["www.youtube.com"]} />
}

License

MIT License