JEKYLL 手工配置语法高亮样式
调用rougify生成器
参考官方增强样式的使用方法:
Syntax highlighting
Themes should support Jekyll’s syntax highlighting by sourcing a Rouge stylesheet, often as a Sass import. To generate a stylesheet, you can use the following command (choosing the Rouge theme that best suits your Jekyll theme):
rougify style base16.solarized.dark > _scss/rouge.scss
手工调整行号的表格样式
添加_sass/_syntax-highlighting-dark-fix.scss
.highlight table { margin:5px 0;border:0;background: linear-gradient(rgba(255,255,255,0.1) 50%, rgba(0,0,0,0.1) 50%); background-size: 100% 40px;}
.highlight table td { padding:0 5px; border:0;}
.highlight table td.gl { width:0; text-align: right;border-right: 1px solid #ccc;}
.highlight table pre { padding: 0; margin: 0; border:0;padding-right: 2px;}
div.highlight, figure.highlight {background-color: transparent!important;}
pre.highlight, pre.highlight .w { color: #93a1a1; }
figure.highlight>pre { color: #93a1a1; background-color: #002b36;}
修改 css/main.scss
// Import partials from "sass_dir" (defaults to "_sass")
@import
"base",
"layout",
"toc",
"rouge",
"syntax-highlighting-dark-fix"
;
post里添加代码就可以用,linenos
可选
{% highlight css linenos %}
figure.highlight>pre {
color: #93a1a1;
background-color: #002b36;
}
{% endhighlight %}
或
~~~css linenos
figure.highlight>pre {
color: #93a1a1;
background-color: #002b36;
}
//~~~
效果
1
2
3
4
figure.highlight>pre {
color: #93a1a1;
background-color: #002b36;
}
也可以在线搜索可用的样式
访问Rouge Theme Preview Page
选择合适的样式抓包下载style.css
我用的是:
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.solarized.dark.css //base16.solarized.dark
例子
Java
int total = 0;
for(int i = 0; i < list.length; i++)
{ total += list[i];
System.out.println( list[i] );
}
return total;
Scala
def findNums(n: Int): Iterable[(Int, Int)] = {
// a for comprehension using two generators
for (i <- 1 until n;
j <- 1 until (i-1);
if isPrime(i + j)) yield (i, j)
}
C++
#include <iostream>
using namespace std;
int main()
{
cout << "Size of char: " << sizeof(char) << " byte" << endl;
cout << "Size of int: " << sizeof(int) << " bytes" << endl;
cout << "Size of float: " << sizeof(float) << " bytes" << endl;
cout << "Size of double: " << sizeof(double) << " bytes" << endl;
return 0;
}
Python
1
2
3
4
5
6
7
8
9
10
11
12
13
~~~
# line comment
v = 1
s = "string"
for i in range(-10, 10):
print(i + 1)
class LinkedList(object):
def __init__(self, x):
self.val = x
self.next = None
~~~
找时候做一个web版本
- https://github.com/rouge-ruby/rouge/tree/master/lib/rouge/themes
引用
完整的Theme和css地址列表
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.css //base16
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.dark.css //base16.dark
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.light.css //base16.light
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.monokai.css //base16.monokai
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.monokai.dark.css //base16.monokai.dark
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.monokai.light.css //base16.monokai.light
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.solarized.css //base16.solarized
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.solarized.dark.css //base16.solarized.dark
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-base16.solarized.light.css //base16.solarized.light
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-colorful.css //colorful
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-github.css //github
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-gruvbox.css //gruvbox
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-gruvbox.dark.css //gruvbox.dark
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-gruvbox.light.css //gruvbox.light
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-igorpro.css //igorpro
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-molokai.css //molokai
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-monokai.css //monokai
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-monokai.sublime.css //monokai.sublime
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-pastie.css //pastie
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-thankful_eyes.css //thankful_eyes
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-tulip.css //tulip
- https://spsarolkar.github.io/rouge-theme-preview/css/syntax-pastie.css //pastie