博客園新語言代碼高亮以及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插件開發（二）