js使用highlight.js高亮你的代碼

更新時(shí)間：2017年08月18日 11:39:09 作者：Ermu丨

本篇文章主要介紹了js使用highlight.js高亮你的代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

在逛別人的博客的時(shí)候，看見(jiàn)別人的代碼的例子使用了高亮的語(yǔ)法，無(wú)論是java，js還是php等等語(yǔ)言，都會(huì)自動(dòng)的對(duì)關(guān)鍵字進(jìn)行高亮。

于是在前幾天自己寫了一個(gè)博客，遇到code時(shí)，自然就想到了別人網(wǎng)站如何漂亮，巴拉巴拉。

開(kāi)始了正式的搗鼓。

在搗鼓之前去別的網(wǎng)站看了看。這里貼上簡(jiǎn)書(shū)的效果：

其中的關(guān)鍵字，方法名，字符串都有不同的顏色，雖然這個(gè)代碼高亮得不是很好看，但還過(guò)得去。于是去看了看document，發(fā)現(xiàn)是這樣的：

<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></pre>

hljs？？絕對(duì)就是這貨了。于是找到了我們的主角：highlight.js。

highlight.js官網(wǎng)

highlightjs的用法可以直接在官網(wǎng)里look

這里我主要寫下自己在使用過(guò)程中踩到些什么坑，以及最終的解決辦法。

1.心急吃不了熱豆腐，萬(wàn)事開(kāi)頭最是難

根據(jù)官網(wǎng)的doc，只需要三行代碼就可以使用了，非常方便，自己寫了個(gè)小demo測(cè)試了一下。還是很有效果的。

<link  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，可以直接通過(guò)上面的連接來(lái)訪問(wèn)cdn，選擇需要的版本。就是那么簡(jiǎn)單。

這個(gè)配色也不是很好看。想要好看的配色可以直接在官網(wǎng)中參考。https://highlightjs.org/static/demo/

2.好用就要應(yīng)用到實(shí)際開(kāi)發(fā)中去

如此簡(jiǎn)單就可以應(yīng)用非常的開(kāi)心，于是應(yīng)用到了項(xiàng)目中去。

結(jié)果遇到了大麻煩....

項(xiàng)目中使用了require.js來(lái)加載js，整個(gè)應(yīng)用用的又是angular的框架。

如果直接這樣寫明顯不符合規(guī)范，于是將代碼變通一下，使用require.js來(lái)加載highlight.js。

在require.config中增加highlight的路徑配置

'highlight':'http://cdn.bootcss.com/highlight.js/8.0/highlight.min',

在require的回調(diào)函數(shù)中執(zhí)行hljs.initHighlightingOnLoad();

require(loadList, function ($, angular) {
    $(function () {
      angular.bootstrap(document, ['blogApp']);
    });
    hljs.initHighlightingOnLoad();
  });

css還是通過(guò)link，也可以使用less的@import加載，因?yàn)轫?xiàng)目用了less，所以我選擇了@import

@import "/lib/highlight/styles/tomorrow-night-eighties.css";

然后在html頁(yè)面寫一個(gè)code測(cè)試：

<body>
    <div ng-include="'template/header.html'"></div>
    <div>
      <pre>
        <code class="lang-javascript">
    function init(){
      $scope.req.getArticle();
      $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    }
        </code>
      </pre>
    </div>
    <div class="content" ui-view></div>
    <footer>cloud blog by@ermu </footer>
  </body>

然后打開(kāi)瀏覽器一看：

灰常完美。

但是當(dāng)使用了ng-bind-html，來(lái)顯示從后臺(tái)返回的文檔時(shí)：

代碼完全不高亮了。仔細(xì)想想，

hljs.initHighlightingOnLoad();

不就是onload的時(shí)候執(zhí)行渲染么，也就是說(shuō)，在此之后改變document都不會(huì)在執(zhí)行了。所以很顯然這樣并不能高亮從接口取會(huì)來(lái)的文檔的代碼。

google了一下，有一個(gè)叫angular-highlightjs 的東西，嘗試了使用，但一直報(bào)錯(cuò)，官網(wǎng)上也沒(méi)有什么說(shuō)明文檔

幸好代碼托管到了github上面，于是去上面看了看，發(fā)現(xiàn)使用說(shuō)明和官網(wǎng)一樣短，issues上也沒(méi)有人問(wèn)這個(gè)問(wèn)題，于是我問(wèn)了一下，希望有人能解答：?jiǎn)栴}地址

我想highlight.js一定有提供對(duì)應(yīng)的方法，在加載完成之后還可以執(zhí)行一次，但無(wú)奈api文檔是英文的，看得比較吃力，決定還是想別的法子。

最終解決問(wèn)題的方法是接口返回使用highlight.js編譯好的html，因?yàn)楹蠖耸褂玫氖莕ode，于是在cnode論壇上搜了一下，發(fā)現(xiàn)marked已經(jīng)解決了這個(gè)問(wèn)題。

只需要在marked的配置中添加highlight項(xiàng)即可（要先npm install highlight.js）：

var marked = require('marked');
var highlight = require('highlight.js');
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  highlight: function (code) {
  return highlight.highlightAuto(code).value;
 }
});

返回的文檔已經(jīng)添加了對(duì)應(yīng)的class。

<pre>
<code class="lang-js">
<span class="hljs-keyword">var</span> math = (<span class="hljs-string">'math'</span>) ;
<span class="hljs-keyword">export</span>.increment = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">val</span>) </span>{
  <span class="hljs-keyword">return</span> math.add(val,<span class="hljs-number">1</span>)
}
</code>
</pre>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: