在jekyll

时间:2017-04-14 18:30:51

标签: css sass jekyll kramdown rouge

我正在制作一个jekyll3博客,我正在尝试使用语法荧光笔(添加代码块,我正在使用

highlighter: rouge markdown: kramdown

由于github页面支持它们。

这是syntax.scss,注意:我试图限制它的高度并允许垂直/负荷滚动。

.highlight pre {
padding: 10;
background-color: #272822;
border: box;
border-radius: 5px;
max-height:300px;
width: auto;
overflow: auto;
display: block;
margin: 0 0px;
white-space: pre-wrap;
}

.highlight .table-responsive,
.highlight pre,
.highlight .table > tbody > tr > td
{
border: box;
border-radius: 5px;
}

.highlight .table-responsive {
margin-bottom: 0;
}

.highlight .table>tbody>tr>td {
padding: 8px 8px 0 8px;
}


.highlight .lineno {
color: #ccc;
display:inline-block;
padding: 0 5px;
border-right:1px
solid #ccc;
}

.highlight pre code {
display: inline-block;
white-space: pre;
overflow-x: auto;
}

// rest of file is about syntax highlighting rules

这就是我在一些帖子中添加代码文本的方式:

{% highlight java linenos %}
String reverse(String a) {
 String result = "";
 int l = a.length();
 for (int i = 0; i < l; i++) {
  result = a.charAt(i) + result;
 }
 return result;
}
String str = reverse("REDRUM");
System.out.print(str);

String reverse(String a) {
 String result = "";
 int l = a.length();
 for (int i = 0; i < l; i++) {
  result = a.charAt(i) + result;
 }
 return result;
}
String str = reverse("REDRUM");
System.out.print(str);

String reverse(String a) /*this isssssss a veeeeeeeeerrrrrrrrrrrrrrrrrrrrrrry lllllllllong codddddddddde*/ {
 String result = "";
 int l = a.length();
 for (int i = 0; i < l; i++) {
  result = a.charAt(i) + result;
 }
 return result;
}
String str = reverse("REDRUM");
System.out.print(str);

String reverse(String a) {
 String result = "";
 int l = a.length();
 for (int i = 0; i < l; i++) {
  result = a.charAt(i) + result;
 }
 return result;
}
String str = reverse("REDRUM");
System.out.print(str);
{% endhighlight %}

现在,问题是:  如果我没有使用linenos,因此没有显示行号,它就像这张图片,这就是我需要的,用户可以垂直和水平滚动代码:

enter image description here

但是,如果我使用linenos来显示行号,它看起来像这张图片,这是错误的,每个部分只能单独和垂直滚动:

enter image description here

那么,我应该修改什么来制作我需要的+显示行号?

1 个答案:

答案 0 :(得分:1)

我今天遇到了同样的麻烦,考虑用pygments替换你的语法荧光笔。

gem install pygments.rb
# _config.yml
highlighter: pygments