使用highlight.js使程式碼高亮
- 巴扎黑原創
- 2017-08-21 10:39:542446瀏覽
這篇文章主要介紹了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>
