我正在制作一个 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以前显示行号，它看起来像这张图片，这是错误的，每个部分都可以单独和垂直滚动：
那么，我应该修改什么来制作我需要的内容+显示行号？