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>