0%

hexo 代码高亮

Posted on Edited on In ,
Symbols count in article: 997 Reading time ≈ 1 mins.

Hexo NexT 主题添加 google code prettify 代码高亮

Install

  • 屏蔽 hexo 自带高亮， _config.yml 中 highlight: enable: false
  • 下载 google code prettify，将 distrib 下压缩文件解压到目录 hexo/source/js

    prettify.css 是对应生成代码高亮的样式文件 prettify.js 是对应的语法解析器

  • 打开安装 hexo 目录下的 themes/next/layout/_layout.swig 文件，在 </body> 之前添加语法解析器文件
    <script type="text/javascript" src="/js/google-code-prettify/prettify.js"></script>
<script type="text/javascript">
$(window).load(function(){
 $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
 prettyPrint();
})
</script>
  • 打开安装 hexo 目录下的 themes/next/layout/_partials/head.swig 文件，在底部引入 css 样式
    <link href="/js/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
  • 切换代码样式，在上文提到的样式地址中，下载你所需的样式文件，然后 copy 到与 prettify.css 同目录中，并且修改相应的引入文件
    <link href="/js/google-code-prettify/tomorrow-night-bright.min.css" type="text/css" rel="stylesheet" />

Ref

  1. hexo 代码高亮
  2. hexo 添加 google code prettify 代码高亮