github pages代碼高亮highlighter

github pages 一直想添加代碼高亮 highlighter ，基於 jekyll 3.0 的 rouge 終於搞定了：

下載代碼高亮庫

在 cmd 中輸入：

rougify style monokai.sublime > rouge.css

能夠下載 rouge.css 出來，將這個 css 文件放到 github pages 項目中存放 css 的目錄下，並在 html 中引用這個庫，請自行更改引用的路徑：

<link href="/static/css/rouge.css" rel="stylesheet"/>

配置文件 _config.yml 中添加這些：

markdown: kramdown
kramdown:
  syntax_highlighter: rouge

將博文 md 文件中的 ``` 替換爲 ~~~ruby ：

調試代碼高亮

在 cmd 中安裝 rouge 方便本地調試：

gem install rouge

爲了防止 ` 被轉義，在 html 中添加以下 js ：

<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax:{processEscapes: true, inlineMath: [ ['$','$'], ["\\(","\\)"] ], skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']}});
MathJax.Hub.Config({TeX:{extensions: ["cancel.js", "enclose.js"],
Macros:{a:"\\alpha",b:"\\beta",c:"\\chi",d:"\\delta",e:"\\epsilon",f:"\\phi",g:"\\gamma",h:"\\eta",i:"\\iota",j:"\\varphi",k:"\\kappa",l:"\\lambda",m:"\\mu",n:"\\nu",o:"\\omicron",p:"\\pi",q:"\\theta",r:"\\rho",s:"\\sigma",t:"\\tau",u:"\\upsilon",v:"\\varpi",w:"\\omega",x:"\\xi",y:"\\psi",z:"\\zeta",D:"\\Delta",F:"\\Phi",G:"\\Gamma",J:"\\vartheta",L:"\\Lambda",P:"\\Pi",Q:"\\Theta",S:"\\Sigma",U:"\\Upsilon",V:"\\varsigma",W:"\\Omega",X:"\\Xi",Y:"\\Psi",ve:"\\varepsilon",vk:"\\varkappa",vq:"\\vartheta",vp:"\\varpi",vr:"\\varrho",vs:"\\varsigma",vf:"\\varphi",alg:"\\begin{align}", ealg:"\\end{align}",bmat:"\\begin{bmatrix}", Bmat:"\\begin{Bmatrix}", pmat:"\\begin{pmatrix}", Pmat:"\\begin{Pmatrix}", vmat:"\\begin{vmatrix}", Vmat:"\\begin{Vmatrix}",ebmat:"\\end{bmatrix}", eBmat:"\\end{Bmatrix}",  epmat:"\\end{pmatrix}",  ePmat:"\\end{Pmatrix}",  evmat:"\\end{vmatrix}",  eVmat:"\\end{Vmatrix}",AA:"\\unicode{x212B}", Sum:"\\sum\\limits", abs:['\\lvert #1\\rvert',1], rmd:['\\mathop{\\mathrm{d}#1}',1],bi:['\\boldsymbol{#1}', 1], obar:['0\\!\\!\\!\\raise{.05em}{-}'],opar:['\\frac{\\partial #1}{\\partial #2}', 2], oppar:['\\frac{\\partial^2 #1}{\\partial #2^2}', 2]}}});
MathJax.Hub.Queue(function(){
var all=MathJax.Hub.getAllJax(),i;for(i=0;i<all.length;i+=1){all[i].SourceElement().parentNode.className+=' has-jax';}});
</script>

在 cmd 中輸入 jekyll server，本地打開 127.0.0.1:4000 查看代碼是否高亮了：

背景色爲白色，字段顯示不出來，因此我把 rouge.css 的背景色改爲了黑色，在 rouge.css 最後面添加以下代碼：

div[class="highlight"] > pre > code[class*="language-"] {
  background:black;
}
div[class="highlight"] > pre {
  background:black;
}
figure[class="highlight"] > pre > code[class*="language-"] {
  text-align:left;
  background:black;
}
figure[class="highlight"] > pre > code[class*="language-"] td > pre{
  text-align:left;
  background:black;
}
figure[class="highlight"] > pre {
  text-align:left;
  background:black;
}
div[class="highlighter-rouge"] > pre[class="highlight"] > code{
  background:black;
}
div[class="highlighter-rouge"] > pre[class="highlight"] {
  background:black;
}

最後效果圖如最開始的圖片那樣了，能夠在個人 github pages 代碼中查看具體的詳情