hexo主题中设置代码高亮

发表于 |
字数统计 344 | 阅读时长 1

今天，介绍一种在主题中添加Google Prettify代码高亮的方法。这里以next主题为例，如果对应的目录不存在，可以手动创建，或选择其它目录。

1、 将压缩包https://raw.githubusercontent.com/google/code-prettify/master/distrib/prettify-small.zip下载到本地，解压到主题的lib目录下，目录名为prettify。
2、 从http://jmblog.github.io/color-themes-for-google-code-prettify/下载自己喜欢的主题文件到lib/prettify/skins目录下。
3、 在主题的layout/_third-party目录下创建prettify.swig文件，内容如下：

<link rel="stylesheet" href="/lib/prettify/skins/{{ theme.custom_highlight_theme }}.css" type="text/css">
<script src="/lib/prettify/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
      prettyPrint();
  });
</script>

4、 修改主题layout目录下的_layout.swig文件（只要是会被所有文件加载的地方都可以），在合适的地方（最好是最后）添加： 

{% include '_third-party/prettify.swig' %}

5、 修改主题的_config.yml文件，添加一行： 

    custom_highlight_theme: theme_name

theme_name是要使用主题名，也就是下载的css文件名。本来想复用next中自带的highlight_theme字段，但是改成其它主题名字后运行hexo会报错，只好新建了一个字段。

参考链接：

https://liuzhichao.com/2016/hexo-use-prettify-to-highlight-code.html

分享