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​​ 代码中查看具体的详情