仓库源文站点原文


layout: post title: Jekyll的中的代码高亮 category: 工具 tags: Jekyll

description: 在这个博客里,我使用了bootstrap作为前端框架,另外通过比较选择了一个还算满意的代码高亮方式

代码高亮方式选择

1.小片段

直接使用“ ` ”符号包含起来,或者使用一个tab直接利用markdown来做高亮

2.Pygments渲染

Jekyll通过Pygments可以直接处理代码高亮

在Github Pages的文档里,也提到了这个方式,但是总觉得这样有点不是很舒服,打破了markdown的格式

3.gist嵌入方式

这个方式使用了一个插件,而且gist也得管理,增大了开销……

4.js和css处理

这个方式使用了google-code-prettify来渲染代码高亮,本身库并不是很大,使用方便,最后我也选择了这个

Prettify使用

1.下载代码

直接到google-code-prettify官网下载代码,然后将它们放到项目下

2.包含css和js

官网提到了可以直接包含run_prettify.js的方式,这个会导入远程库,我选择了自己导入,如下

<link rel="stylesheet" href="/public/js/prettify/prettify.css">
<script src="/public/js/prettify/prettify.js"></script>
<script type="text/javascript">
  $(function(){
    $("pre").addClass("prettyprint linenums");
    prettyPrint();
  });
</script>

这里导入了css和js后,就可以直接用markdown的tab的方式来导入代码段了

3.更换主题

默认主题不是很好看,只要更换prettify.css即可更换样式,可以到这里下载自己喜欢的主题css即可