highlight增加行號
阿新 • • 發佈：2018-12-25
highlight沒有行號支援，發現一個外掛完美解決這個問題
經過修改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>
程式碼實際顯示效果和我上傳的圖片不一樣，因為我本地的檔案做了樣式修改，自己可以下載原始檔後修改！