highlight沒有行號支持，發現一個插件完美解決這個問題
https://github.com/wcoder/highlightjs-line-numbers.js/
經過修改CSS，效果很贊呀！（來着前端大佬的指導，終於實現了我想要的樣式 :）
整個樣式：
<!DOCTYPE html>
<html>
<head>
<link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/monokai-sublime.min.css" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
<script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.5.0/highlightjs-line-numbers.min.js"></script>
<style type="text/css">
::selection { background:#000000; color: #000;color:#fff; }
::-moz-selection { background:#000000;color: #000; color:#fff;} /*火狐瀏覽器*/
::-webkit-selection { background:#000000; color: #000; color:#fff;} /*谷歌*/
</style>
<style>
pre code{
font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
}
</style>
<style>
.hljs {
padding: 0;
}
.hljs-ln td {
padding: 2px 10px;
}
/* for block of numbers */
td.hljs-ln-numbers {
text-align: center;
color: #2F7689;
background-color: #EFF2F3;
/*border-right: 0.5px solid #CCC;*/
vertical-align: top;
}
/* for block of code */
td.hljs-ln-code {
padding-left: 5px;
}
</style>
<title></title>
</head>
<body>
<pre>
<code class="monokai-sublime" >
@RequestMapping("/")
public String index(){
return "welcome!";
}
</code>
</pre>
<script>
hljs.initHighlightingOnLoad();
// 行號插件
hljs.initLineNumbersOnLoad();
// $(document).ready(function() {
// $('pre code').each(function(i, block) {
// hljs.highlightBlock(block);
// });
// });
</script>
</body>
</html>
代碼實際顯示效果和我上傳的圖片不一樣，因爲我本地的文件做了樣式修改，自己可以下載源文件後修改！