在使用某个hexo主题的时候，我们有时候会觉得文章详情中的代码高亮显示的样式并不是很好看，通过下面的方式我们可以选择一套自己喜爱的代码高亮样式，让我们的文章阅读起来更有视觉触动。
配置markdown渲染引擎
- 使用新的渲染引擎
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
- 在_config.yml中配置渲染参数
markdown: 'commonmark'
- 重新预览
hexo clean
hexo s --draft
配置代码高亮
- 设置code-prettify
# 下载源码
git clone https://github.com/google/code-prettify.git
# 拷贝样式
cp code-prettify/src/prettify.css hexo/themes/hyde/source/css/
cp code-prettify/src/prettify.js hexo/themes/hyde/source/js/
- 设置皮肤
# 下载源码
git clone https://github.com/jmblog/color-themes-for-google-code-prettify.git
# 拷贝样式
cd color-themes-for-google-code-prettify/dist/themes
cp tomorrow-night.min.css hexo/themes/hyde/source/css/
- 禁用默认的高亮设置
# 修改_config.yml
highlight:
enable: false
line_number: false
auto_detect: false
tab_replace: false
- 在主题模板文件中设置高亮
# head标签里引入css
<%- css('css/prettify.css', 'css/tomorrow-night.min') %>
# 文档底部引入js
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<%- js('js/prettify.js') %>
# 高亮设置
<script type="text/javascript">
$(window).on('load', function(){
$('pre').addClass('prettyprint linenums');
prettyPrint();
});
</script>
- 刷新预览
hexo clean
hexo s --draft