[Tool] 博客園的 SyntaxHighlighter 代碼高亮


零 資源

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 文件,也不需要在設置里引用這些文件,只需要最后一步就可以使用了;

image

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、整體界面: image   2、支持的語言包括: image   3、其他設置 image   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兼容模式時,雙擊代碼想要復制代碼時,出現如下情景:此時換行符還在,不影響粘貼到其他地方去

image(不正常)

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

image(正常)

對於 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 則是高亮狀態下的,包括前面的行高,這兩個行高默認不一樣,本人就納悶兒了,這樣雙擊后導致的一個效果就是:

image

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

還是在博客園“頁面定制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 目錄下即可;

如果要源碼,請轉至Coding查看:https://coding.net/u/knight0915/p/OLW/git


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com