本文介绍Jekyll代码高亮

GitHub Pages目前使用的Jekyll 3.0，和我们博客相关的特性就有：

• 仅支持kramdown解析Markdown
• 仅支持Rouge作为Markdown代码语法高亮

我们可以在_config.yml文件中看到相关配置如下：

{% highlight yaml %} markdown: kramdown highlighter: rouge kramdown: syntax_highlighter: rouge {% endhighlight %}

按以上配置后，通过Jekyll编译生成的静态网页就会使用Rouge进行代码高亮。但是代码风格如何，还需要我们添加Rouge使用的css文件。

官方讲，本地安装了Jekyll一整套环境和Rouge后，可能通过命令生成相应主题的css文件到指定目录下，命令如下：

{% highlight shell %} rougify style monokai.sublime > assets/css/syntax.css {% endhighlight %}

然后将在我们的GitHub Pages的html页面中引用该文件。一般我们会使用一个head.html文件作为所有html文件的头部，所以可以直接将该css文件在head.html引用即可。

{% highlight html %} {% endhighlight %}

代码块高亮，我们使用html块进行包裹，示例如下：

{% raw %} {% highlight java %} ///代码部分 {% endhighlight %} {% endraw %}

语言高亮示例：

java:

{% highlight java %} package xyz.shiyueshuyi.esclientplus;

import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication public class EsClientPlusApplication {

public static void main(String[] args) {
	SpringApplication.run(EsClientPlusApplication.class, args);
}

} {% endhighlight %}

如果按常见的```java形式进行代码包裹，效果如下：

package xyz.shiyueshuyi.esclientplus;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class EsClientPlusApplication {
	public static void main(String[] args) {
		SpringApplication.run(EsClientPlusApplication.class, args);
	}
}

rouge支持的语言高亮可查看rouge-languages (opens new window)