在 jekyll 中显示行号而不更改代码块样式

Question

我正在制作一个 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，因此没有显示行号，它看起来像这张图片，这正是我需要的，用户可以垂直和水平滚动代码：

但是如果我使用linenos 显示行号，它看起来像这张图片，这是错误的，每个部分都可以单独和垂直滚动：

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

Answer 1

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

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