@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"]} />
}

Extended Syntax

The parser supports the following extended markdown syntax in addition to CommonMark and GFM.

Table cell merge markers

• >: horizontal merge (colspan) to the nearest left non-marker cell
• ^: vertical merge (rowspan) to the nearest upper non-marker cell

|header1|header2|header3|
|:------|:-----:|------:|
|hoge   |>      |piyo   |
|hoge   |^      |^      |
|hoge   |^      |^      |
|hoge   |       |piyo   |
|^      |^      |piyo   |

Inline superscript

30^th^

Inline subscript

H~2~O

Inline mark highlight

This is ==important== text.

Notes

• Single-tilde strikethrough is disabled (singleTilde: false) so ~text~ is reserved for subscript.
• Double-tilde strikethrough (~~text~~) remains available via GFM.

License

MIT License