Show line numbers without changing code blocks style

Help
1

I am making a jekyll3 blog, and I am trying to use a Syntax highlighter (adding code blocks, I am using

highlighter: rouge markdown: kramdown

Since they are supported by github pages.

This is syntax.scss, Note: I am trying to limit it’s height and allow vert/horz scrolling.

.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

and this is how I am adding code text to some post:

{% 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 %}

Now, The problem is:
If I did not use linenos, and hence not showing line numbers, it appears like this pic, Which is what I exactly need, user can scroll code vertically and horizontally :

enter image description here

But If I used linenos to show line numbers, it appears like this pic, which is wrong, each part is scrollable separately and vertically only:

enter image description here

So, What should I modify to make what I need + showing line numbers?