使用highlight.js高亮你的代碼

時間 2019-11-13

標籤使用 highlight.js highlight 代碼欄目 JavaScript 简体版

原文原文鏈接

在逛別人的博客的時候，看見別人的代碼的例子使用了高亮的語法，不管是java，js仍是php等等語言，都會自動的對關鍵字進行高亮。javascript

因而在前幾天本身寫了一個博客，遇到code時，天然就想到了別人網站如何漂亮，巴拉巴拉。php

開始了正式的搗鼓。css

在搗鼓以前去別的網站看了看。這裏貼上簡書的效果：html

其中的關鍵字，方法名，字符串都有不一樣的顏色，雖然這個代碼高亮得不是很好看，但還過得去。因而去看了看document，發現是這樣的：java

<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？？絕對就是這貨了。因而找到了咱們的主角：highlight.js。node

highlight.js官網git

highlightjs的用法能夠直接在官網裏lookgithub

這裏我主要寫下本身在使用過程當中踩到些什麼坑，以及最終的解決辦法。npm

1.心急吃不了熱豆腐，萬事開頭最是難bootstrap

根據官網的doc，只須要三行代碼就能夠使用了，很是方便，本身寫了個小demo測試了一下。仍是頗有效果的。

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

這裏使用了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>
        <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>

而後打開瀏覽器一看：

灰常完美。

可是當使用了ng-bind-html，來顯示從後臺返回的文檔時：

代碼徹底不高亮了。仔細想一想，

hljs.initHighlightingOnLoad();
不就是onload的時候執行渲染麼，也就是說，在此以後改變document都不會在執行了。因此很顯然這樣並不能高亮從接口取會來的文檔的代碼。

google了一下，有一個叫angular-highlightjs 的東西，嘗試了使用，但一直報錯，官網上也沒有什麼說明文檔

幸虧代碼託管到了github上面，因而去上面看了看，發現使用說明和官網同樣短，issues上也沒有人問這個問題，因而我問了一下，但願有人能解答：問題地址

我想highlight.js必定有提供對應的方法，在加載完成以後還能夠執行一次，但無奈api文檔是英文的，看得比較吃力，決定仍是想別的法子。

最終解決問題的方法是接口返回使用highlight.js編譯好的html，由於後端使用的是node，因而在cnode論壇上搜了一下，發現marked已經解決了這個問題。

只須要在marked的配置中添加highlight項便可（要先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;
  }
});

返回的文檔已經添加了對應的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>↵

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。