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 代码中查看具体的详情
github pages代码高亮highlighter的更多相关文章
- 如何在Open Live Writer(OLW)中使用precode代码高亮Syntax Highlighter
早先Microsotf的Windows Live Writer(WLW)现在已经开源了,并且更名为Open Live Writer,但是现在Windows Live Writer还是可以现在,Open ...
- Octopress创建GitHub Pages——基于代码托管的静态博客
Github Pages是静态网页来的,官方也半认可了它的博客用途,代码挂在github上,随时都可以更改,算是不错的一种尝试,因为它是静态的,所以在表现上会自由得多,但是,同样因为它是静态的,管理上 ...
- 搭建自己的GitHub Pages
本文记录博主使用Win 10操作系统和Jekyll 3.1.2搭建GitHub Pages的过程.希望能帮助到相同有需要的朋友. 基本需求 GitHub账号及一个命名为{GitHub昵称}.githu ...
- GitHub Pages 和 Jekyll 笔记
GitHub Pages 和 Jekyll 笔记 快速创建(使用默认的Jekyll引擎) 1. 新建仓库 新建一个空仓库, 名称为username.github.io, 其中 username 就是你 ...
- Set up Github Pages with Hexo, migrating from Jekyll
Set up Github Pages with Hexo, migrating from Jekyll. 本文介绍用Hexo建立github pages, 其中包含了从Jekyll迁移过来的过程. ...
- 通过GitHub Pages建立个人站点总结与体会
通过GitHub Pages建立个人站点总结与体会 ----Git+Github+Jekyll+Markdown blog Git (不会?请参照简易教程学习Git的总结) 首先感谢雨知网站作者博文指 ...
- 使用Github Pages建独立博客
http://beiyuu.com/github-pages/ Github很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点.Github作为现在最流行的代码仓库,已 ...
- 使用jekyll在GitHub Pages上搭建个人博客【转】
网上有不少资源,但大多是“授人以鱼”,文中一步一步的告诉你怎么做,却没有解释为什么,以及他是如何知道的.他们默认着你知道种种专业名词的含义,默认着你掌握着特定技能.你折腾半天,查资料,看教程,一步步下 ...
- 使用 Github Pages 发布你的项目文档
导读 你可能比较熟悉如何用 Github Pages 来分享你的工作,又或许你看过一堂教你建立你的第一个 Github Pages 网站的教程.近期 Github Pages 的改进使得从不同的数据源 ...
随机推荐
- Webpack3 从入门到放弃
我是网络的搬运工,具体请看:Webpack 3,从入门到放弃
- 这篇通俗实用的Vlookup函数教程,5分钟就可以包你一学就会
如何利用Vlookup函数获取学号中的班级信息.换言之,咱们源数据中放着姓名性别学号班级等信息,而在另一张表格中一定有学号信息,但其他信息就未必有,这需要我们将缺失的信息自动同步过去.使用vlooku ...
- scala_2
一.scala类 . 在java中程序的入口是main方法->定义在class中 在scala中程序的入口是main方法->定义在object对象中 案例一: class People { ...
- python控制语句---循环结构语句
这次主要把循环结构的控制语句补上,主要包含while.for.continue.break.循环嵌套.主要写一些基本的认识以及包含的一些实例.当只有唯一路径且只跑一次的时候选择上一节中的选择结构语句就 ...
- something for learning
[Unity Shaders]法线纹理(Normal Mapping)的实现细节 https://blog.csdn.net/candycat1992/article/details/41605257
- x64类型的程序逆向思考
x64类型比较习惯ida去分析,需要注意的是在x64程序中,有时会因为自己对寄存器不太熟悉导致自己分析过程混淆,下面坐下简单记录
- python程序入门 基础教程
1.VSCode基础使用+VSCode调试python程序入门 2.pip 安装 3.scrapy安装 4.python解析xml
- vue动态切换组件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- 微信小程序之微信登陆 —— 微信小程序教程系列(20)
简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...
- php魔术方法__get(),__set(),__isset()的使用
1.魔术方法__get(),__set(),__isset()类: <?php /** * @purpose: 魔术方法 __get() , __set(), __isset() 的使用 * U ...