HTML中显示代码高亮及行号

原文地址

下载相关js和css文件
首先进入highlightjs官网https://highlightjs.org/
根据自己的需求勾选需要高亮的语言
点击下方下载按钮。
然后下载添加行号js文件https://github.com/wcoder/highlightjs-line-numbers.js/

将相关文件复制到项目中
下载的两个文件解压后将default.css、dark.css、highlight.pack.js、
highlightjs-line-numbers.min.js复制到项目文件中

将四个文件引入HTML文件中

  <link rel="stylesheet" href="./css/default.css">  <!--引入默认代码样式，可换其他的-->
  <link rel="stylesheet" href="./css/dark.css">     <!--引入代码深色背景-->  
  <script src="./js/highlight.pack.js"></script>    <!--引入代码高亮js-->
  <script src="./js/highlightjs-line-numbers.min.js"></script><!--引入添加行号js-->

js方法初始化将以下代码加入到

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

添加行号与代码的垂直分割线在<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>

代码书写
将代码内容像以下方式书写

<pre><code>
    <!--代码内容-->
</code></pre>

例如：

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

要注意的是在单页面应用中，页面不刷新highlightjs只执行一次，所以要在组件加载完毕时，执行渲染方法，如：

$('pre code').each(function(i, block) {
    hljs.highlightBlock(block)
    hljs.lineNumbersBlock(block,{
        singleLine: true      //开启单行行号显示
    });
});