调用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

引用

  1. 增强样式官方指引
  2. 语法高亮官方指引
  3. Rouge Theme Preview Page
  4. over 200 different languages

完整的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