components for rendering markdown
8/14/2024

markdown-render

markdown-it 自定义渲染 markdown 数据。

markdown-it github-markdown-css

import { Typography } from 'antd';
import MarkdownIt from 'markdown-it';
import './github-markdown.css';
 
export interface MarkdownProps {
  content: string;
}
 
const md = MarkdownIt({ html: true, breaks: true });
 
const Markdown = (props: MarkdownProps) => {
  const { content } = props;
  return (
    <Typography>
      <div
        className="markdown-body"
        dangerouslySetInnerHTML={{
          __html: md.render(content.replace(/think/g, 'blockquote')),
        }}
      />
    </Typography>
  );
};
 
export default Markdown;