一、背景
最近在鼓捣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 使用
- 安装highlight.js
npm install highlight.js
- 组件中引入（重点！！！）
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css';
highlight需要自己手动引入css文件，否则页面样式不生效，只相当于给特殊内容添加了class
- 初始化参数
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
});
- 调用
<div dangerouslySetInnerHTML = {{__html: marked(this.props.docContent, { renderer: renderer }, )}}></div>
调试代码，发现code中有特殊的class，则说明，highlight处理标签已成功
image.png
成功
image.png
不过样式有点丑。。
