GitHub Pages Jekyll 代码高亮

本文介绍Jekyll代码高亮

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

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

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

markdown: kramdown
highlighter: rouge
kramdown:
  syntax_highlighter: rouge

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

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

rougify style monokai.sublime > assets/css/syntax.css

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

<link rel="stylesheet" href="/assets/css/syntax.css">

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

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

语言高亮示例：

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 %}

rouge支持的语言高亮可查看rouge-languages

欢迎关注我的博客：阿呜的边城

https://blog.shiyueshuyi.xyz

欢迎关注我的公众号：阿呜的编程

题图来源 ：unsplash