本文介紹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