highlight.js默认并没有提供代码行号的功能,然后我在网上找了很久也没有找到完美的解决方法.无意间在疆飞大大的博客里看到了完美的解决方法, 这里针对vs2015的配色方案给出一个教程.

方法分为两种,一种是为全站配置代码块显示功能,一种是只在单页使用.下面两种方法可以根据需求自己选择.
全站配置方式:
1.首先我们要用到jquery,我们需要在blogger模板的页头 b:skin 前添加对jquery的引用.
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
2.然后在下面的b:skin标签内的底部添加
.hljs {
 border: 0;
 overflow: hidden;
 font-family: Arial , Helvetica , sans-serif;
 font-size: 12px;
 background: #5e5c61 !important;
 padding: 0px;
 margin: 0;
 width: 95%;
 word-break: break-all;
 white-space: pre-wrap;
}
.hljs ul {
 list-style: decimal;
 margin: 0px 0px 0px 37px !important;
 padding: 0px;
}
.hljs ul li {
 border-left: 1px solid #DCDCDC !important;
 background: #5e5c61;
 padding: 5px!important;
 line-height: 14px;
}
.hljs ul li:nth-of-type(even) {
 background-color: #5b595e;
}
3.然后根据需要,如果我们只需要在博文页面使用到代码框,那么我们可以把剩下的代码加入到评论框的部分,加快其他页面的加载速度.找到<b:includable id="comments" var="post"> 块,在里面添加
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs2015.min.css" rel="stylesheet"/>
<script>$(function(){$("code").each(function(){$(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");});});hljs.initHighlightingOnLoad();</script>
然后保存为blogger的模板html即可
4.然后在正文编辑时,用
<pre><code class="css">代码Code</code></pre>
添加代码即可,class="css"可以根据需要修改为实际的代码.
以上的css部分都可以自己修改到满意为止.
如果使用到的地方不多,下面给出粘贴即用的方式

单文章内使用方式:
直接拷贝下面代码到html页内,并修改"代码内容"部分的东西
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs2015.min.css" rel="stylesheet"/>
<style>.hljs{border:0;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:12px;background:#5e5c61!important;padding:0;margin:0;width:95%;word-break:break-all;white-space:pre-wrap}.hljs ul{list-style:decimal;margin:0 0 0 37px!important;padding:0}.hljs ul li{border-left:1px solid #dcdcdc!important;background:#5e5c61;padding:5px!important;line-height:14px}.hljs ul li:nth-of-type(even){background-color:#5b595e}</style>
<pre><code class="html">代码内容</code></pre>
<script>$(function(){$("code").each(function(){$(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");});});hljs.initHighlightingOnLoad();</script>
到这里,讲解就完毕啦,附上疆飞大大的博客页面,方法都是他想出来的,表示感谢
https://www.jiangfei.net/jianzhan/1098.html