react中解析markdown文本

背景

产品想把从某个地方复制出来的markdown文本，保存下来，并且在前端这边展示的时候，按照对应的格式展示

工具

• marked
• highlight.js
• marked-highlight

原来的marked版本，是可以直接处理高亮配置，但是后续更新为了轻量化，就由marked-highlight来干这件事情

marked文档

安装

npm i -S marked highlight.js marked-highlight

使用

1. 入口文件中增加，高亮所需要的样式文件

// todo 后续优化，根据用户选择的样式 动态导入
import 'highlight.js/styles/a11y-dark.css';

2. marked的配置

import { Marked } from 'marked';
import highlight from 'highlight.js';
import { markedHighlight } from 'marked-highlight';const marked = new Marked(markedHighlight({langPrefix: 'hljs language-',highlight(code, lang) {const language = highlight.getLanguage(lang) ? lang : 'plaintext';return highlight.highlight(code, { language }).value;}}),{gfm: true,breaks: true,pedantic: false,}
)export default marked;

3. 使用方式

// 伪代码
import marked from 'xxx';const func = async text => {const parseRES = await marked.parse(text ?? '')console.log(parseRES) // 这里打印出来带有标签
}// render部分
return (<div dangerouslySetInnerHTML={{__html: parseRES}}> />
)

效果如下：

写在最后

如果有帮到小伙伴们，就帮主播点个小小的赞支持一手，感谢！