css - 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、行番号を表示していた場合、次の写真のように表示されますが、これは間違っています。各部分は個別に垂直方向にのみスクロール可能です。

では、必要なものを作成するには何を変更し、行番号を表示する必要がありますか?