hexo代码高亮

发表于   |   分类于   |     |   阅读次数

介绍如何设置文章中代码如何高亮

我们经常看到别人的网站，贴出来的代码，都进行了高亮显示，那么我们是否也可以做到呢？答案是确定的，肯定可以做到，其实hexo NextT主题自带了高亮的配置属性，但是在使用过程中，我们发现很难兼容语言，并且识别率不高，代码的高亮颜色不明显，那么我们怎么来实现我们自己的“高亮”呢？

hexo自带高亮配置

首先我们看一下hexo自带的高亮配置

在hexo/themes/目录下打开你_config.yml配置文件，找到highlight_theme属性

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

这里呢可以配置的属性有normal | night | night eighties | night blue | night bright，你可以挨个试一试，看下效果，选择你喜欢的一个属性

接下来，光有这个配置还不行，在你的hexo/目录下_config.yml文件中中，找到，并设置如下

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

切换到你的hexo主目录，重新生成hexo

# 清除
hexo clean
# 生成
hexo g
# 启动服务
hexo s

然后访问http://localhost:4000看下效果

hexo使用Google Code Prettify

前提：本文使用的是nextT主题，如果你使用其他主题，下文中请自行替换对应的主题目录路径

  1. Google Code Prettify 的github地址
  2. Google Code Prettify 的样式地址

我们需要先从github上把Prettify下载下来，然后解压后，切换到Prettify后，目录结构如下：
prettify目录结构
如果你是在类linux系统中使用，可以在该目录下运行make命令，会在./distrib/目录下生成一个编译的google-code-prettify目录，这里面就是我们后面需要用到的js和css资源文件。如果没有条件自己编译，那么就自己打开./distrib/目录，解压几个压缩文件中的任意一个，同样可以获取到所需的资源文件

现在需要配置我们的hexo，来自动生成高亮代码

1.关闭hexo的高亮配置

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

2.copy我们已经下载并解压或者下载并编译后的资源文件
复制google-code-prettify目录下的prettify.css和prettify.js文件到hexo目录下的/themes/next/source/js/google-code-prettify/文件夹中，如果目录不存在，新建目录，其中google-code-prettify目录可以根据你自己的需求建立，后面在生成js和css的url时会相关。
prettify.css是对应生成代码高亮的样式文件
prettify.js是对应的语法解析器
解压后目录如下
copy prettify resources
注意：根据解压开的README.MD和docs/getting_started.md两个文件显示，prettify.js中的词法分析器，会分析多种语言，包括C语言和类C语言,Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles,和 Rust.
当然，他也在Ruby, PHP, VB, Awk 和一系列Perl和Ruby的子集中，但是因为约定，没有语言扩展的情况下，不支持Smalltalk, OCaml等语言。
其他语言会通过扩展来支持，支持的语言见附录一.拷贝的时候，需要连同相应的支持语言的js文件一起拷贝

3.引入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>

解释：因为我们通过Markdown编辑，生成html文件时，会对代码块自动生成标签，所以我们需要在页面加载完成的时候，对<pre\>标签进行动态加入css样式，生成代码
注意：其中路径中的next是主题目录，根据你当前的主题，切换到主题目录下的_layout.swig文件；/js/google-code-prettify/prettify.js路径是你刚才复制到sources目录下的路径，如果自定义，这里也需要相应的变动

4.引入css
打开安装hexo目录下的themes/next/layout/_partials/head.swig文件，在底部引入css样式

<link href="/js/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />

5.重新生成hexo
使用上面提过的命令，重新生成hexo，访问http://localhost:4000看下效果

6.切换代码样式
在上文提到的样式地址中，下载你所需的样式文件，然后copy到与prettify.css同目录中，并且修改相应的引入文件

<link href="/js/google-code-prettify/tomorrow-night-bright.min.css" type="text/css" rel="stylesheet" />

然后重新生成hexo，访问http://localhost:4000看下效果

其他使用Google Code Prettify

上面讲的只是在hexo中使用全局配置来高亮代码，如果你有需要在其他地方使用高亮，可以参考README.MD和getting_started.md两个文件，里面比较详细的介绍了自定义使用Google Code Prettify的方法方式

附录一

Apollo-–lang-apollo.js
Basic-–lang-basic.js
Clojure-–lang-clj.js
CSS-–lang-css.js
Dart-–lang-dart.js
Erlang-–lang-erlang.js
Go-–lang-go.js
Haskell-–lang-hs.js
Lasso-–lang-lasso.js
Lisp, Scheme-–lang-lisp.js
Llvm-–lang-llvm.js
Logtalk-–lang-logtalk.js
Lua-–lang-lua.js
Matlab-–lang-matlab.js
MLs: F#, Ocaml,SML-–lang-ml.js
Mumps-–lang-mumps.js
Nemerle-–lang-n.js
Pascal-–lang-pascal.js
Protocol buffers-–lang-proto.js
R, S-–lang-r.js
RD-–lang-rd.js
Rust-–lang-rust.js
Scala-–lang-scala.js
SQL-–lang-sql.js
Swift-–lang-swift.js
TCL-–lang-tcl.js
Latek-–lang-tex.js
Visual Basic-–lang-vb.js
VHDL-–lang-vhdl.js
Wiki-–lang-wiki.js
XQ-–lang-xq.js
YAML-–lang-yaml.js