Jekyll博客代码块语法高亮设置

20 March, 2018. It was a Tuesday.

view:

使用jekyll搭建的博客，发现编写代码的时候无法实现语法高亮，现通过rouge模块生成对应语法高亮CSS来实现代码快语法高亮

首先电脑上得安装Ruby，具体安装过程请自行搜索

首先使用gem安装rouge、kramdown

gem install kramdown
gem install rouge

在_config.yml文件中添加如下代码：

highlighter: rouge
markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

安装rouge 后，就可以用附带的 rougify 工具来生成多种高亮主题的CSS文件，个人比较喜欢monokai.sublime 主题.

rougify style monokai.sublime > syntax.css

将上述生成的syntax.css文件拷到博客对应的css目录下,在网站的HTML代码的<head>标签内加载

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

打开网站浏览效果发现代码块的背景为浅色背景，且代码的字体过小。修改刚才的syntax.css文件，在最后面加上：

pre[class='highlight'] {background-color:#272822;}
pre[class='highlight'] {font-size: 1em;}