HTML中顯示代碼高亮及行號

1. 下載相關js和css文件

    首先進入highlightjs官網 https://highlightjs.org/
    根據自己的需求勾選需要高亮的語言

  點擊下方下載按鈕。
  然后下載添加行號js文件https://github.com/wcoder/highlightjs-line-numbers.js/

2. 將相關文件復制到項目中

    下載的兩個文件解壓后將default.css、dark.css、highlight.pack.js、
    highlightjs-line-numbers.min.js復制到項目文件中

3. 將四個文件引入HTML文件中

1 <link rel="stylesheet" href="./css/default.css">  <!--引入默認代碼樣式，可換其他的-->
2  <link rel="stylesheet" href="./css/dark.css">     <!--引入代碼深色背景-->
3  <script src="./js/highlight.pack.js"></script>    <!--引入代碼高亮js-->
4  <script src="./js/highlightjs-line-numbers.min.js"></script><!--引入添加行號js-->

4. js方法初始化

    將以下代碼加入到<script>標簽中

 <script>
    hljs.initHighlightingOnLoad(); // 初始化
    hljs.initLineNumbersOnLoad();
 </script>

5. 添加行號與代碼的垂直分割線

    在<style>標簽中添加如下代碼

<style>
    .hljs-ln-numbers {
    text-align: center;
    color: #ccc;
    border-right: 1px solid #999;
    vertical-align: top;
    padding-right: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   }
</style>

6. 代碼書寫

    將代碼內容像以下方式書寫

 <pre><code>
    <!--代碼內容-->
 </code></pre>

例如：

 <pre><code>
        System.out.println("Hello World!");
 </code></pre>