react 中使用 marked + highlight.js 使语法高亮

1. 安装 marked + highlight.js 依赖

   cnpm i marked highlight.js --save

2. 引入 marked + highlight.js

   import marked from 'marked'
   import hljs from "highlight.js";
   import 'highlight.js/styles/monokai-sublime.css';
   //第三项中的css 高亮主题可以自己更换自己喜欢的
   

3. marked 配置highlight.js

   marked.setOptions({
         renderer: new marked.Renderer(),gfm: true,pedantic: false,sanitize: false,tables: true,breaks: true,smartLists: true,smartypants: true,highlight: function (code) {
         return hljs.highlightAuto(code).value;}}); 
   

上边的三步配置完后就可以通过 let html=marked(mdcontent) 的方式转换md 内容为html 并进行渲染了，但是需要注意的是在react 中直接对需要渲染的地方使用 dom.innerText=html 的方式进行渲染会渲染出marked 转化出的字符串，这不是我们想要的结果 ，需要强制将字符串转化为html 代码，另一篇文章有提到 React标签字符串强制转html的方法

以上操作完毕后就基本能够达到想要的效果了，如果想让代码块突出显示的话 可以设置 pre code标签的 css，我的设置如下：

/* 代码块高亮 */
pre {
    position: relative;margin-bottom: 24px;border-radius: 3px;border: 1px solid #C3CCD0;background: #FFF;overflow: hidden;}
code {
    display: block;padding: 12px 24px;overflow-y: auto;font-weight: 300;font-family: Menlo, monospace;}
code.has-numbering {
    margin-left: 21px;}
.pre-numbering {
    position: absolute;top: 0;left: 0;width: 20px;padding: 12px 2px 12px 0;border-right: 1px solid #C3CCD0;border-radius: 3px 0 0 3px;background-color: #EEE;text-align: right;font-family: Menlo, monospace;font-size: 0.8em;color: #AAA;}