hexo主题中设置代码高亮
今天，介绍一种在主题中添加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_nametheme_name是要使用主题名，也就是下载的css文件名。本来想复用next中自带的highlight_theme字段，但是改成其它主题名字后运行hexo会报错，只好新建了一个字段。
参考链接：
https://liuzhichao.com/2016/hexo-use-prettify-to-highlight-code.html
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-06-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读