logoAnt Design X

DesignDevelopmentComponentsX SDKX MarkdownPlayground
  • Introduction
  • Code Examples
  • Streaming Rendering
  • Components
  • Themes
  • Plugins
    • Overview
    • LatexFormula
    • HighlightCode
    • MermaidDiagram
    • CustomPlugins

Introduction

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

@ant-design/x-markdown aims to provide a streaming-friendly, highly extensible and high-performance Markdown renderer. It offers capabilities such as streaming rendering of formulas, code highlighting, mermaid etc.

✨ Features

Built on marked as the base Markdown renderer, inheriting all features of marked.

  • 🚀 Built for speed.
  • 🤖 Streaming-friendly, a Markdown rendering solution for large models.
  • ⬇️ Low-level compiler for parsing Markdown without long-term caching or blocking.
  • ⚖️ Lightweight while implementing all supported Markdown styles and specifications.
  • 🔐 Secure by default, no dangerouslySetInnerHTML XSS attacks.
  • 🎨 Customizable components - pass your own components to replace default ones like <h2> for ## hi.
  • 🔧 Rich plugin ecosystem with many plugins to choose from.
  • 😊 Compatible - 100% CommonMark compliant, 100% GFM plugin compliant.

Compatibility

Aligned with marked. To improve overall Markdown compatibility with systems, custom polyfills can be added.

Edge
Edge		Firefox
Firefox		Chrome
Chrome		Safari
Safari		Opera
Opera
>= 92>= 92>= 90>= 15.4>= 78

Supported Markdown Specifications

  • Markdown 1.0.0
  • CommonMark
  • GitHub Flavored Markdown (GFM)

Installation

Using npm or yarn or pnpm or bun or utoo

We recommend using npm or yarn or pnpm or bun or utoo for development, which allows easy debugging in development environments and safe production deployment, enjoying the benefits of the entire ecosystem and toolchain.

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
Utoo Logoutoo
bash
$ npm install @ant-design/x-markdown --save

If your network environment is poor, we recommend using cnpm.

Browser Usage

Include files directly in the browser using script and link tags, and use the global variable XMarkdown.

We provide x-markdown.js, x-markdown.min.js and x-markdown.min.js.map in the dist directory of the npm package.

Strongly not recommended to use built files directly, as this prevents on-demand loading and makes it difficult to get quick bug fixes for underlying dependencies.

Note: x-markdown.js, x-markdown.min.js and x-markdown.min.js.map depend on react and react-dom. Please ensure these are included first.

Example

tsx
import React from 'react';
import { XMarkdown } from '@ant-design/x-markdown';
const content = `
# Hello World


### Welcome to XMarkdown!


- Item 1
- Item 2
- Item 3
`;


const App = () => <XMarkdown content={content} />;


export default App;

Plugins

@ant-design/x-markdown provides a rich set of plugins that can be used via the plugins property. See Plugin Collection for details.

Themes

@ant-design/x-markdown offers a variety of themes to choose from. See Themes for details.