github pages 一直想添加代码高亮 highlighter ,基于 jekyll 3.0rouge 终于搞定了:

下载代码高亮库

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

github pages代码高亮highlighter的更多相关文章

  1. 如何在Open Live Writer(OLW)中使用precode代码高亮Syntax Highlighter

    早先Microsotf的Windows Live Writer(WLW)现在已经开源了,并且更名为Open Live Writer,但是现在Windows Live Writer还是可以现在,Open ...

  2. Octopress创建GitHub Pages——基于代码托管的静态博客

    Github Pages是静态网页来的,官方也半认可了它的博客用途,代码挂在github上,随时都可以更改,算是不错的一种尝试,因为它是静态的,所以在表现上会自由得多,但是,同样因为它是静态的,管理上 ...

  3. 搭建自己的GitHub Pages

    本文记录博主使用Win 10操作系统和Jekyll 3.1.2搭建GitHub Pages的过程.希望能帮助到相同有需要的朋友. 基本需求 GitHub账号及一个命名为{GitHub昵称}.githu ...

  4. GitHub Pages 和 Jekyll 笔记

    GitHub Pages 和 Jekyll 笔记 快速创建(使用默认的Jekyll引擎) 1. 新建仓库 新建一个空仓库, 名称为username.github.io, 其中 username 就是你 ...

  5. Set up Github Pages with Hexo, migrating from Jekyll

    Set up Github Pages with Hexo, migrating from Jekyll. 本文介绍用Hexo建立github pages, 其中包含了从Jekyll迁移过来的过程. ...

  6. 通过GitHub Pages建立个人站点总结与体会

    通过GitHub Pages建立个人站点总结与体会 ----Git+Github+Jekyll+Markdown blog Git (不会?请参照简易教程学习Git的总结) 首先感谢雨知网站作者博文指 ...

  7. 使用Github Pages建独立博客

    http://beiyuu.com/github-pages/ Github很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点.Github作为现在最流行的代码仓库,已 ...

  8. 使用jekyll在GitHub Pages上搭建个人博客【转】

    网上有不少资源,但大多是“授人以鱼”,文中一步一步的告诉你怎么做,却没有解释为什么,以及他是如何知道的.他们默认着你知道种种专业名词的含义,默认着你掌握着特定技能.你折腾半天,查资料,看教程,一步步下 ...

  9. 使用 Github Pages 发布你的项目文档

    导读 你可能比较熟悉如何用 Github Pages 来分享你的工作,又或许你看过一堂教你建立你的第一个 Github Pages 网站的教程.近期 Github Pages 的改进使得从不同的数据源 ...

随机推荐

  1. HeadFirst学习笔记-2.观察者(Observer)模式

    认识观察者模式 我们用报纸和杂志的订阅为例来介绍: 报社的业务就是出版报纸. 向某家报社订阅报纸,只要他们有新报纸出版,就会给你送来.只要你是他们的订户,你就会一直收到新报纸. 当你不想再看报纸的时候 ...

  2. c/c++再学习:查找算法了解

    1.顺序查找 说明:顺序查找适合于存储结构为顺序存储或链接存储的线性表. 基本思想:顺序查找也称为线形查找,属于无序查找算法.从数据结构线形表的一端开始,顺序扫描,依次将扫描到的结点关键字与给定值k相 ...

  3. HEX SDUT 3896 17年山东省赛D题

    HEX SDUT 3896 17年山东省赛D题这个题是从矩形的左下角走到右上角的方案数的变形题,看来我对以前做过的题理解还不是太深,或者是忘了.对于这种题目,直接分析它的性质就完事了.从(1,1)走到 ...

  4. Fiddler 过滤设置

    1.User Fiters启用     2.Action Action:Run Filterset now是否运行,Load Filterset加载,Save Filterset保存:   3.Hos ...

  5. go 可变参数

    go 在参数列表中使用 ... 表示可变参数,例如: import "fmt" func Minimum(first int, others ...int) int { min : ...

  6. 详解Session和cookie

    1.cookie 1.1. 为什么会有cookie? 由于HTTP是无状态的,服务端并不记得你之前的状态.这种设计是为了HTTP协议的方便,但是也存在一些问题.比如我们登录一个购物网站,我们需要用户登 ...

  7. vue组件里定时器销毁问题

    我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样是非常消耗性能的.如下图所示: 解决方法1: 首先我在data函数里面进行定义定时器名称: data( ...

  8. git 服务器搭建与运用

    环境:CentOS 6 为了不影响后面的安装 安装依赖库 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-dev ...

  9. [tkinter]隐藏/销毁控件

    pack布局的情况下有pack_forget()方法让控件“不再显示”但控件还存在可以再次pack出来 from tkinter import * root = Tk() l1 = Label(roo ...

  10. python 模型 ORM简介

    Django之ORM (Object Relational Mapping(ORM)一.ORM介绍1.ORM概念 对象关系映射模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.2.OR ...