使用highlight.js使代码高亮
- 巴扎黑原创
- 2017-08-21 10:39:542481浏览
本篇文章主要介绍了js使用highlight.js高亮你的代码 ，非常具有实用价值，需要的朋友可以参考下
在逛别人的博客的时候，看见别人的代码的例子使用了高亮的语法，无论是java，js还是php等等语言，都会自动的对关键字进行高亮。
于是在前几天自己写了一个博客，遇到code时，自然就想到了别人网站如何漂亮，巴拉巴拉。
开始了正式的捣鼓。
在捣鼓之前去别的网站看了看。这里贴上简书的效果：
其中的关键字，方法名，字符串都有不同的颜色，虽然这个代码高亮得不是很好看，但还过得去。于是去看了看document，发现是这样的：
<pre class="hljs javascript"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">name,age,sex</span>) </span>{
<span class="hljs-built_in">console</span>.log(name+age+sex);
}
<span class="hljs-comment">//要是我这样传,name就成了18，age成了王二了。</span>
getPersonInfo(<span class="hljs-string">'18'</span>,<span class="hljs-string">'王二'</span>,<span class="hljs-string">'男'</span>);
<span class="hljs-comment">//所以可以这样写</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">args</span>)</span>{
<span class="hljs-built_in">console</span>.log(args.name+args.age+args.sex);
}
getPersonInfo({name:<span class="hljs-string">'王二'</span>,age<span class="hljs-string">'18'</span>,sex:<span class="hljs-string">'男'</span>});</code>hljs？？绝对就是这货了。于是找到了我们的主角：highlight.js。
highlight.js官网
highlightjs的用法可以直接在官网里look
这里我主要写下自己在使用过程中踩到些什么坑，以及最终的解决办法。
1.心急吃不了热豆腐，万事开头最是难
根据官网的doc，只需要三行代码就可以使用了，非常方便，自己写了个小demo测试了一下。还是很有效果的。
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="external nofollow" rel="stylesheet"> <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> <script >hljs.initHighlightingOnLoad();</script>
这里使用了bootstarp提供的cdn，可以直接通过上面的连接来访问cdn，选择需要的版本。就是那么简单。
这个配色也不是很好看。想要好看的配色可以直接在官网中参考。https://highlightjs.org/static/demo/
2.好用就要应用到实际开发中去
如此简单就可以应用非常的开心，于是应用到了项目中去。
结果遇到了*烦....
项目中使用了require.js来加载js，整个应用用的又是angular的框架。
如果直接这样写明显不符合规范，于是将代码变通一下，使用require.js来加载highlight.js。
在require.config中增加highlight的路径配置
'highlight':'http://cdn.bootcss.com/highlight.js/8.0/highlight.min',
在require的回调函数中执行hljs.initHighlightingOnLoad();
require(loadList, function ($, angular) {
$(function () {
angular.bootstrap(document, ['blogApp']);
});
hljs.initHighlightingOnLoad();
});css还是通过link，也可以使用less的@import加载，因为项目用了less，所以我选择了@import
@import "/lib/highlight/styles/tomorrow-night-eighties.css";
然后在html页面写一个code测试：
<body>
<p ng-include="'template/header.html'"></p>
<p>
<pre class="brush:php;toolbar:false">
<code class="lang-javascript">
function init(){
$scope.req.getArticle();
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
}
</code>
