博客園新語言代碼高亮以及OpenLiveWriter插件開發（一）

參考：

新語言代碼高亮及Windows Live Writer插件開發

最近學習Swift，在博客上寫筆記的時候一直以爲Swift代碼的高亮不太使人滿意，由於博客園的編輯器上傳代碼模板中沒有包括Swift在內的新語言。

偶然看到了上面這篇參考博文，爲我提供了一些解決思路，決定一試。

1.HighLight.js

下載地址：https://highlightjs.org/（2016.09.16注：不知爲什麼，這個網站訪問不了了，找不到下載的地方了額）

github地址：https://github.com/isagalaev/highlight.js/

在下載頁面選擇本身須要適配的編程語言，而後下載獲得一個壓縮包，解壓後內容以下：

highlight.pack.js中包含了對選擇的語言的關鍵字、註釋等等的高亮處理。

styles文件夾則包含了各類顯示風格，包括github、AndroidStudio、Xcode等，以及其餘不少風格。

將hightlight.pack.js文件和本身想要的style文件從後臺上傳文件到博客園。

而後進行博客設置，在頁首html處加上如下代碼：

<link rel="stylesheet" href="http://files.cnblogs.com/files/tt2015-sz/xcode.css">
<script src="http://files.cnblogs.com/files/tt2015-sz/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

把href和src改爲本身的文件連接便可。

2.使用代碼高亮效果

<div class="cnblogs_code">
<pre><code class="swift">
func backward(_ s1: String, _ s2: String) -&gt; Bool {
    return s1 &gt; s2
}
var reversedNames = names.sorted(isOrderedBefore: backward)
//reversedNames is equal to ["Ewa", "Daniella", "Chris", "Barry", "Alex"]<br /></code></pre>
</div>

新建一篇隨筆，編輯HTML源代碼，寫入以上代碼。保存，而後查看，即可看到下面的效果：

其中，

<div class="cnblogs_code">...</div>用來顯示默認的博客園代碼片斷效果，有複製按鈕，能夠摺疊等等。

<pre><code class="swift">...</code></pre>是highlight產生效果的片斷，能夠看到上面的效果與XCode風格一致。
在這裏須要註明class，才能與對應的語言高亮效果匹配。

關於class詳細，能夠看這裏：http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html

3.插件開發

儘管上面的使用方法能夠達到必定的效果，可是每次插入代碼都要編輯HTML源碼，添加<pre><code class="swift">...</code></pre>，也是比較麻煩。

後面考慮在OpenLiveWriter中添加插件。

參考博文：OpenLiveWriter代碼插件

---

[2016.09.16]

插件開發進行時，發現了一個問題，https://highlightjs.org/這個下載地址沒法訪問了，暫時不清楚爲何。

爲了可以使插件儘量地適配（當前highlightjs支持的）全部編程語言，決定在Ubuntu系統下從新編譯獲得highlight.pack.js。

參考：http://highlightjs.readthedocs.io/en/latest/building-testing.html

（1）從gitbub上下載獲得highlight.js的工程源碼，解壓到桌面。

地址：https://github.com/isagalaev/highlight.js/

（2）下載nodejs並安裝

地址：https://nodejs.org/en/

我下載的是最新版本v6.6.0

下載下來的是一個壓縮包，裏面有bin/include/share/lib等目錄，個人安裝方法比較粗暴，直接將這些目錄複製到/usr目錄下。

$ node -v
v6.6.0

說明安裝成功。

（3）編譯

$ cd ～/lDownloads/highlight.js-master
$ node tools/build.js -t browser

中間遇到一些小問題：

這種問題，通常用npm install + 相應模塊 便可解決：

特別地，安裝gear-lib時遇到WARN：

這個時候，可能須要update一下：

$ sudo npm update -g gear-lib

從新編譯，成功：

在build目錄下，出現highlight.pack.js文件，因爲適配了全部的語言，文件比較大，有456.1kb。

文件很大，雖然能囊括166種語言，可是文件很大，會影響網頁加載速度的哦。

---

【2016.09.18】

今天發現https://highlightjs.org 又能訪問了，可喜可賀~~

---

【2016.09.20】

今天終於把上面提到的插件完工啦，避免這篇博文變得過長，另開一篇詳述插件的編寫過程。

博客園新語言代碼高亮以及OpenLiveWriter插件開發（二）