在使用某个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

参考