静态网页代码块美化
很久没有闲下来折腾这些东西了，今天忽然发现自己这个博客的代码块不仅高亮不太全而且缺不少功能，遂开始研究要怎么实现。
Jekyll官方文档中描述的方案虽然能够支持代码高亮，但是支持的语言较少，而且可自定义程度较低，另外低版本Jekyll对行号的支持也不够完善，测试时存在显示错误的情况。
在查询资料后，发现直接使用prismjs是性价比更高的选择。
下载
进入官网，自定义选择主题、支持语言及插件，选择完成后下载prism.js和prism.css文件即可，最上边最好选择Minified version版本，另外建议不要选择过多的语言支持，容易影响网页加载速度。
目前我这边选择的是Okaidia主题。
安装
下载好prism.js和prism.css文件后，将prism.js文件放到项目的js目录下，将prism.css放到项目的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>
使用
正常在markdown文档中使用代码块即可
