antdpro富文本

import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {history} from "@@/core/history";
import './index.less'
// @ts-ignore
import md from '../../../../README.md'
import md1 from '../../../../软件工程部Web前端开发规范V1.2.md'
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import 'markdown-navbar/dist/navbar.css';
import './index.less';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import {vscDarkPlus, coyWithoutShadows, darcula} from 'react-syntax-highlighter/dist/esm/styles/prism';
import {Affix} from "antd";

const Help = () => {

  const [selectMenu, setSelectMenu] = useState<string>(decodeURIComponent(new URLSearchParams(location.search).get("name") as string) )//获取url路径上的名字
  const menuList = ["系统简介", "语言与运行环境支持", "许可证", "通过 Web 客户端发起测试", "通过 IDE 插件发起测试", "查看测试结果", "自定义清洗器（Sanitizer）", "与 VCS 集成", "与 Jenkins 集成", "与 Jira 集成", "FAQ"]

  useEffect(()=>{

    // @ts-ignore
    return setSelectMenu(history.location?.query.name || "系统简介");
  }, )
  const select = (item) => {
    history.push({
      query: {
        name: item
      },
    })
    // @ts-ignore

    setSelectMenu(item)

    document.getElementsByTagName('main')[0].scrollTo(0, 0);

  }

  return (

    <PageContainer
      onBack={() => {
        history.goBack();
      // @ts-ignore

      }}
      header={{title: ''}}
    >
      <div style={{display: "flex"}} className='article-container'>
        {selectMenu === '系统简介' ? <div style={{width: '78%', marginRight: 20}}>
          <ReactMarkdown
            components={{
              code({node, inline, className, children, ...props}) {
                return !inline ? (
                  <SyntaxHighlighter
                    children={String(children).replace(/\n$/, '')}
                    style={coyWithoutShadows}
                    PreTag="div"
                    language={'javascript'}
                    {...props}
                  />
                ) : (
                  <code className={className} {...props}>
                    {children}
                  </code>
                )
              }
            }}

            rehypePlugins={[[gfm, {singleTilde: false}]]} skipHtml={true}>
            {md1}
          </ReactMarkdown>
        </div> : null}
        {selectMenu === '语言与运行环境支持' ? <div style={{width: '78%', marginRight: 20}}>
          <ReactMarkdown
            components={{
              // eslint-disable-next-line @typescript-eslint/no-unused-vars
              code({node, inline, className, children, ...props}) {
                return !inline ? (
                  <SyntaxHighlighter

                    children={String(children).replace(/\n$/, '')}
                    style={coyWithoutShadows}
                    PreTag="div"
                    language={'javascript'}
                    {...props}
                  />
                ) : (
                  <code className={className} {...props}>
                    {children}
                  </code>
                )
              }
            }}

            rehypePlugins={[[gfm, {singleTilde: false}]]} skipHtml={true}>
            {md}
          </ReactMarkdown>
        </div> : null}


        {/*菜单*/}
        <div style={{height: 400}}>
          <Affix offsetTop={120}>
            <div className='rightMenu'>
              {menuList.map((item) => {
                return (

                  <div className={selectMenu === item ? 'clickItem' : 'item'} key={item}
                       onClick={() => select(item)
                       }>
                    {item}</div>
                )
              })}

            </div>
          </Affix>
        </div>

      </div>
    </PageContainer>

  );
};
export default Help;

引入

ReactMarkdown

通过

import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import 'markdown-navbar/dist/navbar.css';
import './index.less';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import {vscDarkPlus, coyWithoutShadows, darcula} from 'react-syntax-highlighter/dist/esm/styles/prism';

引入相应样式和代码样式

成果如下