@ discord/ markdown- react

用于渲染Discord Markdown的平台-不可知回放库. 需要一个AST 然后把它变成反应元素.

使用量

import { NodeList } from '@discord/markdown-react';
import { parse } from '@discord/markdown-wasm'; // or @discord/markdown-react-native

function Text({ children }) {
  return <span>{children}</span>;
}

function Paragraph({ children }) {
  return <span>{children}</span>;
}

const renderers = {
  text: Text,
  paragraph: Paragraph,
  quote: Quote,
  ...otherRenderers, // define renderers for other node types
};

export function Markdown({ content }) {
  const ast = parse(
    content,
    // without flags every syntax parses, so you must define a renderer for every node type
  );

  return <NodeList nodes={ast} renderers={renderers} />;
}

在节点外, @discord/markdown-wasm 需要一个 await init() 第一次选举之前 parse; 见 它的阅读.

如果您没有为 AST 中的节点类型提供渲染器, 渲染会 失败。 你可以通过解析器来调谐 flags 省去了语法 生产(例如:. Syntax.ALL & ~Syntax.MENTIONS或通过将渲染器添加到 renderers。 。 。 .

构建

pnpm build