react 博客详情页面使用highlights

refer: https://github.com/highlightjs/highlight.js

1.在React项目中引入依赖：

yarn add highlight.js

或者使用：

npm install highlight.js

2.在页面引入highlights:

<span style="color:#dcc6e0">import</span> hljs <span style="color:#dcc6e0">from</span> <span style="color:#abe338">&#39;highlight.js&#39;</span>;
<span style="color:#dcc6e0">import</span> <span style="color:#abe338">&#39;highlight.js/styles/default.css&#39;</span>; <span style="color:#d4d0ab">// 导入highlight.js的默认样式</span>

3.在生命周期使用：

<span style="color:#00e0e0">componentDidMount</span>() {
hljs.initHighlightingOnLoad(); <span style="color:#d4d0ab">// 初始化highlight.js</span>
hljs.highlightAll(); <span style="color:#d4d0ab">// 应用highlight.js的高亮效果</span>
}

4.在得到文章内容后使用：

if (response.statusText === &quot;OK&quot;) {
this.setState(
{
// ...
},
() =&gt; {
hljs.highlightAll(); // 在数据获取后应用highlight.js的高亮效果
}
);
}

4.打开文章的详情页面可以看到文章的代码已经使用highlights的样式了：