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}}> />
)

效果如下：

写在最后

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

原文地址：https://blog.csdn.net/qq_36579455/article/details/142419539

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！