github pages代码高亮highlighter

机器学习和大数据挖掘

发布于 2019-07-01 18:19:18

1.2K0

发布于 2019-07-01 18:19:18

文章被收录于专栏：数据挖掘数据挖掘

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-12-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

github