react中使用marked+highlight.js 实现高亮效果

一、背景

最近在鼓捣md文件转html的相关东西，使用的marked第三方插件， 遇到代码高亮需求时，卡了半天。。一直不知道为什么无法高亮显示。 解决后记录下来供参考

二、问题

问题： react 使用marked+highlight.js样式不生效

原因： 需要手动引入highlight.js的样式文件

三、markedjs官网

官网demo

// Create reference instance
var myMarked = require('marked');

// Set options
// `highlight` example uses `highlight.js`
myMarked.setOptions({
  renderer: new myMarked.Renderer(),
  highlight: function(code) {
    return require('highlight.js').highlightAuto(code).value;
  },
  pedantic: false,
  gfm: true,
  tables: true,
  breaks: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  xhtml: false
});

// Compile
console.log(myMarked('I am using __markdown__.'));

说明

highlight: function(code) {
    return require('highlight.js').highlightAuto(code).value;
}

code 参数是<code>中的初始内容， 该函数返回的是经highlight 处理 (给特定内容添加上class)后的内容。

四、react 使用

1. 安装highlight.js

npm install highlight.js

2. 组件中引入(重点！！！)

import hljs  from 'highlight.js'
import 'highlight.js/styles/github.css';

highlight需要自己手动引入css文件，否则页面样式不生效，只相当于给特殊内容添加了class

3. 初始化参数

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

4. 调用

<div dangerouslySetInnerHTML = {{__html: marked(this.props.docContent, { renderer: renderer }, )}}></div>

调试代码，发现code中有特殊的class，则说明，highlight处理标签已成功

image.png

成功

image.png

不过样式有点丑。。

五、相关文章

marked+highlight.js 高亮效果没出来，谁有例子highlight.js怎么修改高亮风格