为 jekyll 中的代码块添加行号
使用
prism.js为代码块添加行号
1. 下载安装 prism.js
在官网下载prism.js和prism.css，可以自定义选择主题、支持语言及插件，这里的主题是Okaidia。支持的语言没必要选太多，不然体积会比较大，并且最上面最好选择Minified version。
网页拉到底下载js和css文件，下载后分别复制到js和css文件夹即可。
2. js和css文件的引入
在_include/head.html中添加以下内容
<!-- line number for code block -->
<script src="/js/prism.js"></script>
<link rel="stylesheet" href="/css/prism.css">
在_include/footer.html中添加：
<!-- line number for code block -->
<script>
var pres = document.getElementsByTagName("pre");
for(var i = 0; i < pres.length; i++){
var pre = pres[i];
if(pre.childNodes[0].nodeName == "CODE"){
pre.setAttribute("class","line-numbers");
}
}
</script>
3. 使用
大功告成，只需在markdown文件中使用~~~或```中就可以愉快的显示行号了。
如：
```cpp
int main(){
return 0;
}
```
效果如下：
int main(){
return 0;
}
注意
- 对于没有指定语言的代码块，不显示效果，所以无论如何都要指定语言，随便指定都可以，会被解析成 plaintext。
- 在 Github-Pages 对行内（inline）代码也添加样式，但在本地不会这样，可能是 jekyll 的版本问题。
