为hexo博客加入prettify高亮插件

作者: JumpByte
原文链接: http://jumpbyte.cn/2016/07/02/use-and-install-prettify/

禁用默认高亮插件

在hexo博客_config.yml中将highlight插件禁用

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

引用prettify插件

下载插件

从github下载prettify源码,解压后将src目录重命名(如prettify),然后拷贝至你的hexo博客的source目录,建议在博客source目录单独建立一个插件目录(plugins)存放,以后所有的插件都放置到此目录,这里我就是拷贝到source/plugins目录下,如图**(注:必须放在source目录下面,否则生成静态文章的时候无法输出到public目录)**

接着我们还要对hexo的_config.yml做如下配置

skip_render:
    - "plugins/**"

这个配置就是要告诉hexo对plugins目录下的所有文件跳过解析渲染,因为测试时发现如果不配置,加载prettify的相关js会报脚本错误,猜测hexo渲染造成的编码问题

引用插件

在yilia的主题下面找到yilia\layout_partial\head.ejs和yilia\layout_partial\after-footer.ejs两个文件,分别引入样式和脚本文件(如果你用的是其他主题,可参照对应)

在head.ejs中引入样式

.....省略代码.......
<!--prettify代码高亮主题css引入-->
<link href="/plugins/prettify/prettify.css" rel="stylesheet">
.....省略代码.......

在after-footer.ejs中引入脚本

.....省略代码.......
<!--prettify代码高亮脚本引入-->
<script src="/plugins/prettify/prettify.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
 prettyPrint();
})
</script>
.....省略代码.......

注意:脚本文件引入注意一定要在jquery脚本之后

启动生成浏览

此时我们用hexo clean && hexo g && hexo server 发布浏览,结果代码高亮怪怪的,如图:

此时F12我们定位此块代码样式发现,刚第一步禁用的highlight高亮插件的样式还是会加载

对yilia主题调整修改

上一步高亮结果显示有问题,于是立马怀疑yilia主题没有对highlight配置项做开关控制,结果发现在themes\yilia\source\css\style.styl文件确实没有做开关设置,而是直接引入

所以,接下来要稍微做下调整

  1. 把上面的红框标记的那一行注释掉
  2. 仔细观察发现还有样式文件的影响,继续找到themes\yilia\source\css_partial\article.styl文件先备份下,
    然后将其中搜下所有pre,code 标签关联的样式删除之
  3. 最后再在themes\yilia\source\css\style.styl文件中在加入下面几行调整样式
/*解决prettyify在yilia主题下面行号显示问题*/
pre.prettyprint{
 padding-left: 20px;
}
/*代码自动换行
不要设置这个,要不然移动端代码会自动换行
*/
pre{
   word-break: break-all;
   word-wrap: break-word;
 }

大功告成

总算不白折腾,重新hexo生成发布浏览,prettify就能正常高亮代码了

但默认主题样式还不够炫(niu)酷(bi),这里给大家提供n套prettify主题供大家下载,下载后解压,在themes目录下面有多套主题样式,如图:

这里面每套主题都对应一个未压缩版和压缩版,而每套主题的效果,可以点击此链接查看,喜欢那套样式,就直接重命名为prettify替换原来的prettify.css应用即可

继续优化

根据上述步骤,我们已经将默认高亮插件成功的替换成prettify高亮插件,但有两处不方便的地方

  1. prettify插件有很多高亮主题样式,如果以后我们想替换其他主题样式,没有提供可配置主题自动替换
  2. 想换回默认高亮插件得手动还原回去,不灵活

基于上面的问题考虑,我们来通过加入几个配置项,使其能够做到灵活切换主题和插件

增加配置项

  1. 在hexo博客的根目录找到_config.yml,加入下面配置
 #prettify 插件位置
 # enable 启用和不启用
 # theme 使用prettify高亮主题名称
 prettify:
   enable: true
   theme: "这里你可以定义上面下载的themes主题包里面样式文件名,不带.css后缀"
  1. 在你安装的主题根目录下面找到_config.yml,加入下面配置
 #highlight启用和禁用
 highlight:
   enable: false
  1. 将你上面下载的prettify主题包解压后拷贝到博客source/plugins/目录,如下:

加入主题开关判断

  1. 修改 themes\yilia\source\css_variables.styl 文件,在文件任意位置加入下面这行
 highlight = hexo-config("highlight.enable")
  1. 在themes\yilia\source\css\style.styl文件,加入开关判断
 if highlight{
  @import "_partial/highlight"
 }
  1. 分别对yilia\layout_partial\head.ejs和yilia\layout_partial\after-footer.ejs两个文件做调整

head.ejs调整如下:

<% if (config.prettify.enable){ %>
  <!--prettify代码高亮主题css引入-->
  <link href="/plugins/prettify/themes/<%= config.prettify.theme %>.css" rel="stylesheet">
<% } %>

after-footer.ejs调整如下:

<!--prettify代码高亮js引入-->
<% if (config.prettify.enable){ %>
<script src="/plugins/prettify/prettify.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
 prettyPrint();
})
</script>
<%}%>

这里引用prettify的样式文件统一定位到/plugins/prettify/themes/下面,所以如果你用默认的prettify.css样式
只要要把默认样式也拷贝到/plugins/prettify/themes/目录下面即可

通过以上的配置,我们就可以灵活的切换prettify高亮主题了,并且通过配置可以来回切换高亮插件,只要你想要,就是这么任性!

文章目录
  1. 1. 禁用默认高亮插件
  2. 2. 引用prettify插件
    1. 2.1. 下载插件
    2. 2.2. 引用插件
    3. 2.3. 启动生成浏览
  3. 3. 对yilia主题调整修改
  4. 4. 继续优化
    1. 4.1. 增加配置项
    2. 4.2. 加入主题开关判断
|