直接引用远程的highlight文件实现：

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

引用之后，但是好像并没有出现这个效果呢？

原来后台提交后生成的代码语言标签为：

<pre class="brush:html;toolbar:false">
你的源码
</pre>

而highlight解析的标签格式默认为：

<pre>
       <code>
        你的源码
        </code>
</pre>

把代码文件稍做修改，使用pre标签：

<link rel="stylesheet" type="text/css" href="{pboot:sitetplpath}/highlight/tomorrow-night-eighties.css">
<script type="text/javascript" src="{pboot:sitetplpath}/highlight/highlight.pack.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre').forEach((block) => {
        hljs.highlightBlock(block);
      });
    });
</script>

强制刷新，看看效果。

高亮效果基本上完成了。

highlight有关文件可以下载到服务器，本地加载，加载代码如下：

<link rel="stylesheet" type="text/css" href="{pboot:sitetplpath}/highlight/tomorrow-night-eighties.css">
<script type="text/javascript" src="{pboot:sitetplpath}/highlight/highlight.pack.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre').forEach((block) => {
        hljs.highlightBlock(block);
      });
    });
</script>

源文件下载：highlight.zip

更多风格文件，可以自行下载：https://highlightjs.org/download/

增加行号的功能

文件引用：

<link rel="stylesheet" type="text/css" href="{pboot:sitetplpath}/highlight/tomorrow-night-eighties.css">
<script type="text/javascript" src="{pboot:sitetplpath}/highlight/highlight.pack.js"></script>
<script type="text/javascript" src="{pboot:sitetplpath}/highlight/highlightjs-line-numbers.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre').forEach((block) => {
        hljs.highlightBlock(block);
         hljs.lineNumbersBlock(block);
      });
    });
</script>

highlightjs-line-numbers.js为行号插件。

默认的效果不太理想，修改一下css。

<style>
    .hljs {
    padding: 0;
            margin-bottom: 24px;
            border-radius: 2px;
            border: 1px solid #C3CCD0;
    }
    .hljs-ln td {
    padding: 2px 5px 2px 10px;
}
/* 数字 */
td.hljs-ln-numbers {
    text-align: right;
    color: #AAA;
    background-color: #EEE;
    border-right: 1px solid #C3CCD0;
    vertical-align: top;
    font-family: Menlo, monospace;
}
/* 数字 */
td.hljs-ln-code {
    padding-left: 5px;
}
    </style>

效果和本站效果类似（本站使用的另外方式实现的）。

行号插件本站下载：highlightjs-line-numbers.js.zip，下载后解压到highlight文件夹。