🚧 MateChat React 文档仍在开发中

Markdown 渲染

Markdown 组件提供了安全的 Markdown 渲染能力,包括标题、代码块、引用和链接。

安装

pnpm dlx shadcn@latest add https://matechat.noctisynth.org/r/bubble.json

代码块

javascript
const greeting = "Hello, World!"; console.log(greeting);
import { CodeBlock } from "@matechat/react";

export default function () {
  return (
    <div className="w-full max-w-lg">
      <CodeBlock className="language-javascript">
        {`const greeting = "Hello, World!";
console.log(greeting);`}
      </CodeBlock>
    </div>
  );
}

引用块

This is a blockquote. It can be used to highlight important information or quotes.
import { BlockQuote } from "@matechat/react";

export default function () {
  return (
    <div className="w-full max-w-lg">
      <BlockQuote>
        This is a blockquote. It can be used to highlight important
        information or quotes.
      </BlockQuote>
    </div>
  );
}

安全链接

import { Link } from "@matechat/react";

export default function () {
  return (
    <div className="w-full max-w-lg flex flex-col gap-2">
      <Link href="https://example.com">External Link (opens in new tab)</Link>
      <Link href="/path/to/page" target="_self">
        Internal Link
      </Link>
    </div>
  );
}

参数

Heading

属性说明类型默认值

CodeBlock

属性说明类型默认值

BlockQuote

属性说明类型默认值
属性说明类型默认值