[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

一 前言

 

從前：

一、博客園要使用 SyntaxHighlighter 插件來高亮代碼，須要先在文件裏上傳 *.js…、*.css…，而後在設置裏引用這些 js 和 css 文件，接着在 js 裏執行 SyntaxHighlighter.all(); ，最後方可在 pre 標籤內使用；

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

二、想要高亮段代碼，還要切換到 html 源碼裏去修改標籤，設置 class；

三、複製一段代碼也是至關的繁雜，好像要用到 clipboard.swf，沒怎麼去研究過；

如今：

一、博客園已經默認支持 SyntaxHighlighter 插件，能夠從博客中加載的 blog-common.js 中找到（以下圖），因此咱們不須要再上傳那些 js、css 文件，也不須要在設置裏引用這些文件，只須要最後一步就可使用了；

二、封裝成插件，只需點點點就能夠搞定了；

三、支持雙擊複製代碼，並且不是像博客園原裝的高亮代碼，點擊複製代碼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，發佈後就能夠看到代碼高亮效果了。

三 截圖和效果

一、總體界面：

 

二、支持的語言包括：

 

三、其餘設置

 

四、發佈博客園後顯示效果以下：

// 插入代碼
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);
    }
}

四 最後說明

一、若是選擇「摺疊代碼」時，必須選擇「toolbar」，由於摺疊標題是在工具欄處，若是不顯示工具欄也就不顯示摺疊標題，最後在界面上是什麼都顯示不出來的；

二、有些屬性設置博客園並不支持，好比「ruler」，其餘的有興趣本身去嘗試吧；

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

當使用IE兼容模式時，雙擊代碼想要複製代碼時，出現以下情景：（此時換行符還在，不影響粘貼到其餘地方去）

（不正常）

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

（正常）

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

通過測試得知，在IE瀏覽器中將文檔模式切換到七、八、9，均正常，其餘模式下則不正常；

在獵豹瀏覽中須要切換到極速模式，或者在F12中切換文檔模式到七、八、9纔有效，F12中切換瀏覽器模式則無效；

四、此外，雙擊進入 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 目錄下便可；