logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Code Examples
  • Streaming Rendering
  • Themes
  • Plugins
    • Overview
    • Latex
    • HighlightCode
    • Mermaid
    • CustomPlugins
    • Theme & Locale
  • Components
    • Overview
    • Think
    • DataChart
    • Custom Component

Introduction

@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 - replace any Markdown element with your own, e.g. <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>= 90>= 92>= 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.