程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> C#入門知識 >> [Live Writer] 博客園的 SyntaxHighlighter 代碼高亮，syntaxhighlighter

[Live Writer] 博客園的 SyntaxHighlighter 代碼高亮，syntaxhighlighter

編輯：C#入門知識

[Live Writer] 博客園的 SyntaxHighlighter 代碼高亮，syntaxhighlighter

一前言

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

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

從前：

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} 處加入要高亮的代碼（需要將 < 轉義成 <）就可以了。

其中，

屬性設置可以參考兩個地方：官網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下載鏈接：

Memento.OLW.dll

說明：請將壓縮包裡的兩個dll拷貝到 C:\Users\用戶文件夾\AppData\Local\OpenLiveWriter\app-0.6.0.0\Plugins 目錄下即可；如果要源碼，請見右上角的“Fork me Coding”；