[Tool] 部落格園的 SyntaxHighlighter 代碼高亮

最新版本請移步↘

Open Live Writer 插件更新

零 資源

SyntaxHighlighter下載下傳：http://alexgorbatchev.com/SyntaxHighlighter/download/

SyntaxHighlighter配置：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

dll下載下傳連結：Memento.OLW.dll 更新至 Memento.OLW_V1.0.0.0.7z

一 前言

從前：

1、部落格園要使用 SyntaxHighlighter 插件來高亮代碼，需要先在檔案裡上傳 *.js…、*.css…，然後在設定裡引用這些 js 和 css 檔案，接着在 js 裡執行 SyntaxHighlighter.all(); ，最後方可在 pre 标簽内使用；

<pre class="brush:js;"></pre>      

2、想要高亮段代碼，還要切換到 html 源碼裡去修改标簽，設定 class；

3、複制一段代碼也是相當的繁雜，好像要用到 clipboard.swf，沒怎麼去研究過；

現在：

1、部落格園已經預設支援 SyntaxHighlighter 插件，可以從部落格中加載的 blog-common.js 中找到（如下圖），是以我們不需要再上傳那些 js、css 檔案，也不需要在設定裡引用這些檔案，隻需要最後一步就可以使用了；

2、封裝成插件，隻需點點點就可以搞定了；

3、支援輕按兩下複制代碼，而且不是像部落格園原裝的高亮代碼，點選複制代碼logo後進入複制狀态後，無法切換回來的那樣，SyntaxHighlighter 輕按兩下會進入 textarea 編輯全選狀态，此時就可以 Ctrl+C 複制代碼，然後離開 textarea 焦點，即可切換會代碼高亮樣式；

二 正文

實作起來很簡單，結構就是下面一句話的事兒：

<pre class='{0}'>{1}</pre>      

隻要在 {0} 處加入高亮屬性設定，在 {1} 處加入要高亮的代碼（需要将 < 轉義成 &lt;）就可以了。

其中，

屬性設定可以參考兩個地方：官網Configuration 和 滴答的雨，所有屬性設定最後通過“key:value; key:value; …”的形式組合放置于 {0} 處，例如：

<pre class="brush: xml;html-script: false;quick-code: true;smart-tabs: true;auto-links: false;toolbar: false;gutter; true;light: false;ruler: false;pad-line-numbers: 2;collapse: false;tab-size: 4;first-line: 1;">&lt;pre class='{0}'&gt;{1}&lt;/pre&gt;</pre>      

而 {1} 處的高亮代碼，可以直接從剪貼闆獲得，亦或者直接在插件視窗内編輯均可；

最後将組合拼接完成的（如上面代碼）指派給前面文章中提到的 content，釋出後就可以看到代碼高亮效果了。

三 截圖和效果

1、整體界面：

2、支援的語言包括：

3、其他設定

4、釋出部落格園後顯示效果如下：

// 插入代碼
private void btnInsert_Click(object sender, EventArgs e)
{
    try
    {
        m_Settings.Brush = cmbBrush.Text;
        m_Settings.SyntaxHighlighterTitle = txtTitle.Text;
        m_Settings.FirstLine = int.Parse(txtFirstLine.Text);
        m_Settings.Hightlight = txtHightlight.Text;
        m_Settings.Collapse = chbCollapse.Checked;
        m_Settings.Theme = cmbTheme.Text;
        m_Settings.Save();

        string code = txtCode.Text;
        code = code.Replace("<", "<");// 轉義<符号
        code = string.Format(CommonHelper.SyntaxHighlighterStructure, GetSettingStr(), code);
        m_Settings.PostBlogContent = code;
        m_Settings.PreviewContent = code;
        m_Settings.Save();

        if (Closed != null)
        {
            Closed(DialogResult.OK);
        }
    }
    catch (Exception ex)
    {
        CommonHelper.ShowError(ex);
    }
}      

四 最後說明

1、如果選擇“折疊代碼”時，必須選擇“toolbar”，因為折疊标題是在工具欄處，如果不顯示工具欄也就不顯示折疊标題，最後在界面上是什麼都顯示不出來的；

2、有些屬性設定部落格園并不支援，比如“ruler”，其他的有興趣自己去嘗試吧；

3、浏覽器相容問題，本人使用的是獵豹浏覽器，其中包括極速模式和IE相容模式，

當使用IE相容模式時，輕按兩下代碼想要複制代碼時，出現如下情景：（此時換行符還在，不影響粘貼到其他地方去）

（不正常）

當切換到極速模式時，又是正常的，如下：

（正常）

對于 textarea 裡的換行問題還真是不懂，搞了半天也沒弄明白為啥，有大神知道的還望不吝賜教。

經過測試得知，在IE浏覽器中将文檔模式切換到7、8、9，均正常，其他模式下則不正常；

在獵豹浏覽中需要切換到極速模式，或者在F12中切換文檔模式到7、8、9才有效，F12中切換浏覽器模式則無效；

4、此外，輕按兩下進入 textarea 編輯全選模式時，要保證 textarea 中的行高和前面行号的行高一緻，還需要設定一下樣式；

部落格園預設的

.syntaxhighlighter textarea 的行高為 line-height:1.1em!important

.syntaxhighlighter .line 的行高為 line-height:1.8em!important

其中 textarea 自然就是輕按兩下後的編輯全選狀态，line 則是高亮狀态下的，包括前面的行高，這兩個行高預設不一樣，本人就納悶兒了，這樣輕按兩下後導緻的一個效果就是：

左右完全不對稱啊，完全不符合本人審美觀念…

還是在部落格園“頁面定制CSS代碼”加上一句行高的樣式定義吧：

.syntaxhighlighter .line{
  white-space: pre!important;
  line-height: 1.5em!important;
}
.syntaxhighlighter textarea{
  line-height: 1.5em!important;
}      

說明：請将壓縮包裡的兩個 dll 拷貝到 C:\Users\使用者檔案夾\AppData\Local\OpenLiveWriter\app-0.6.0.0\Plugins 目錄下即可；

歡迎您掃一掃上面的微信公衆号, 訂閱我的部落格!

文章作者：Memento

部落格位址：http://www.cnblogs.com/Memento/

版權聲明：Memento所有文章遵循創作共用版權協定，要求署名、非商業、保持一緻。在滿足創作共用版權協定的基礎上可以轉載，但請以超連結形式注明出處。