在React中解析渲染markdown文件

解决办法

安装marked对md文件进行解析

npm install marked --save

基本使用

import { marked } from 'marked';

const rendererMD = new marked.Renderer();
marked.setOptions({
  renderer: rendererMD,
  gfm: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
});
const mdContent = require(文件路径)
let info = marked(mdContent.default);

...
const mdRender = useRef<HTMLDivElement>(null!);
...
<div ref={mdRender} style={{ backgroundColor: 'white' }}></div>
...
// 在合适的地方使用下面的代码即可
mdRender.current.innerHtml = info;

---

说明

  一、使用require

    我是用umi写代码的，如果用import报错找不到模块
 

  二、动态路径的一些限制

    我们在react中写的代码都是会打包的，即便JavaScript支持动态导入，但是webpack本身是个静态打包的工具，所以要让webpack知道需要打包哪些东西
    
mdfile下面有两个md文件，我的页面会根据当前路由动态切换显示两个md文件，这时候可以用动态路径，但是要告知webpack对这两个文件都进行打包

const file = require(`@/pages/React/mdfile/${pathConfig.first1}`);

路径明确写到了mdfile，这样webpack会将mdfile下面所有的文件进行打包
由此拓展我们可以得知，下面的写法是不被允许的

const file = require(`${mdfilePath}${pathConfig.first1}`);

如果在这些限制并且代码正确的情况下，依旧出现了找不到对应文件的问题，请检查webpack对应的配置
 

  三、使用第三方提供的样式

    github的markdown样式下载

npm install github-markdown-css

    在文件中导入样式

import 'github-markdown-css';

    注意，仅这样样式是不会生效的，需要在容器dom中添加对应的类名“markdown-body”

<div className="markdown-body" ref={mdRender} style={{ backgroundColor: 'white' }}>
</div>

添加样式前：
    
添加样式后：
    
    样式会受到容器样式的一些影响，你也可以选择打造一个自己的样式
 

  四、在markdown显示代码效果

    我想要在markdown中显示一些代码效果，最好是能够直接在markdown中导入模块，比如下面的写法
    
    （注意，这是在markdown中）
 
    我不想展示具体的代码，而是让页面能够直接看到代码运行的效果，就比如上面的文件在页面中表现出下面的效果

    
    
    这需要我们干涉渲染过程
    首先，我们要将 “展示的代码” 与 “展示运行效果的代码” 区分开来，最好的做法是添加一些特殊的标记，以便于你在后面的渲染过程中根据标记找到这部分内容
    
    没错，添加标记后你就能够找到他，因为marked对其进行的处理其实很简单
    
    
    现在，你可以通过正则表达式捕获相应的内容，包括用户导入的包体名称，具体编写的代码等等。
    在react中，我们拿到导入的包的对象，如果对象是一个组件，你可以直接用组件的方式进行代码编写
    
根据你自己的需求完成相应的代码吧