痞客邦部落格程式上色相關文章:

• Part1: SyntaxHighLighter
• Part2: highlight.js
• Part3: Prim.js

這個已經很多人寫過了, 不過我還是要記一下自己試的心得.

網站上查到的 99% 都說把 script 貼在 "側邊欄位設定-->頁尾描述". 其實這種作法會產生一個問題: 就是往後人家看你的部落格時, "每一篇" 都會去拉一次 SyntaxHighLighter 的 script. 可是又不是每一頁都有程式碼, 都需要用到 SyntaxHighLighter.

後來想到應該可以把它嵌在需要用到的貼文中就好了啊!

方法一: 用 "編輯器模式" 編輯文章時, 切換到 "編輯 HTML 原始程式碼", 把原本要貼在 "側邊欄位設定-->頁尾描述" 的 script 貼在第一個要上色的程式碼前面即可, 如果有用 <div></div> 把它們包住, 那就更好了.

切換到 "編輯 HTML 原始程式碼"

方法二: 用 "純文字模式" 編輯文章時, 必需把編輯區下方的 系統換行 選項打勾, 之後就可以像使用標準文字編輯器 (如: Notepad 或 UltraEdit) 修改網頁內容一樣, 不會走鐘. 之前我使用 "純文字模式" 編輯文章時, 不知道要把它打勾, 結果每一個換行都多了一個 <br />, 當然程式也就不會正常運作了.

取消 '系統換行': 編輯區下方的 '系統換行' 選項打勾

2015/07/15 更新

發現 痞客邦 自己就有提供 SyntaxHighLighter 的插件, 只要在 "痞客邦" 的 "應用市集" 安裝一下即可, 下載來源為 CDN 很快, 也可以進行客製化設定.

但是一樣是部落格的整體設定, 所以 "每一編文章都會下載".

應該可以研究看看用它的寫法自己改成需要的時候才下載.

SyntaxHighLighter

下面例子的調色組合是: Midnight (shTheneMidnight.css)

<div>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script>
SyntaxHighlighter.all();
</script>
<pre class="brush: cpp; toolbar: false;">
...
你要上色的程式碼
...
</pre>
</div>

用法說明:

• 第二行到第八行是 syntaxhighlighter 的 css 和 javascript.
• 第二行是載入系統預設值
• 第三行是載入調色組合, 可以依個人喜好把 "shThemeDefault", 換成其他的調色組合
• 預設的調色組合有:

  Theme	Script Name
  Default	shThemeDefault.js
  Django	shThemeDjango.js
  Eclipse	shThemeEclipse.js
  Emacs	shThemeEmacs.js
  FadeToGray	shThemeFadeToGrey.js
  MDUltra	shThemeMDUltra.js
  Midnight	shThemeMidnight.js
  RDark	shThemeRDark.js

• 第五行是載入刷子 (brush, 是語法分析元件), 需依實際需求載入對應的 brush.
• 支援的 brush 有: Ref v3.0.83 Brush
  

  Brush Name	Script Name	Brush Name	Script Name
  AppleScript	shBrushAppleScript.js	AS3	shBrushAS3.js
  Bash	shBrushBash.js	ColdFusion	shBrushColdFusion.js
  Cpp	shBrushCpp.js	CSharp	shBrushCSharp.js
  Css	shBrushCss.js	Delphi	shBrushDelphi.js
  Diff	shBrushDiff.js	Erlang	shBrushErlang.js
  Groovy	shBrushGroovy.js	Java	shBrushJava.js
  JavaFX	shBrushJavaFX.js	JScript	shBrushJScript.js
  Perl	shBrushPerl.js	Php	shBrushPhp.js
  Plain	shBrushPlain.js	PowerShell	shBrushPowerShell.js
  Python	shBrushPython.js	Ruby	shBrushRuby.js
  Sass	shBrushSass.js	Scala	shBrushScala.js
  Sql	shBrushSql.js	Vb	shBrushVb.js
  Xml	shBrushXml.js

• 需要上色的程式碼要用 <pre class="brush: xxxx"></pre> 包住, xxxx 是指明用什麼 brush 來上色, 如: cpp, xml ...

2015/07/15 更新

免費下載來源:

• 把 "http://alexgorbatchev.com/pub/sh/current"
  換成 "https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83"
• 同時附檔名前加上 "min.", 例如: "shCore.js" 改為 "shCore.min.js"

2015/07/17 更新

在部落格中修改 default style sheet

• 直接把 <style></style> 區段插入在 SyntaxHighlighter.all(); 的 <script></script> 區段前.
• SyntaxHighLighter 的 style 都是以 .syntaxhighlighter 開頭

因為痞客邦部落格的線上編輯器有點機車, 用 "編輯器模式" 會幫我們把文章的一些 tag 檢查一遍, 為了不讓這段小 script 亂了您的大作, 請改用下面這段, 同時 <div></div> 的 style 不要設 margin, padding. 改設定在 <div class="code"></div> 上.

你可以改用 "純文字模式", 但是要記得檢查 "編輯區" 下方的 "系統換行" 選項, 要打勾再 "儲存文章"

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css" rel="stylesheet" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<style type="text/css">
.syntaxhighlighter {
  margin: 4px 0 4px 0 !important;
}
</style>
<script>
SyntaxHighlighter.all();
</script>
<div class="code">
<pre class="brush: cpp; toolbar: false;">...
...
...</pre>
</div>
...

2015/07/17 更新

有點小機車的 IE browser bug:
套用了 SyntaxHighLighter 的 shCore.css 之後, 發現一個不是很喜歡的 bug, 偶而出現 "垂直捲軸", 同時還有捲動時會有隨機出現的殘影線, 整個畫面都給他毀了...

終於不小心給試出一個修正方法:

• 加 <div></div>
• 調整 margin 及 padding

SyntaxHighLighter 的區塊結構示意圖

上圖是 SyntaxHighLighter 的區塊結構示意圖, 其中

• 最外面紅色區塊是我加的 <div class="code"></div> 區段, 裡面貼的就是要上色的程碼.
• 裡面的三個區塊 SyntaxHighLighter 自己轉換產生的.
• 第二層的紫色區塊是 <div></div>
• 第三層的淺綠色區塊是 <div class="syntaxhighlighter ..." id="..."></div>
• 第四層則水藍色區塊是 <table></table>, 裡面只有一行, 再分為二欄分別是 "行號欄" 及 "程式碼欄"

如何調整呢?

• 淺綠色區塊的 CSS 是來自 .syntaxhighlighter { ... }, 在 shCore.css 中, 有預設的 "margin: 1em 0px 1em 0px;", 我把它改為 "4px 0px;"
• 紫色區塊的 CSS 是來自 <div> 的預設值, margin, padding 都是 0, 我把它改為 "margin: 0px 1px ; padding:1px 0px;"
• 紅色區塊的 CSS 則是我自訂的 div.code { ... }, 我把它改為 "padding: 0px 4px; overflow:auto; "

解釋:

• table 的程式碼欄太長是造成水平 overflow 的主因, 另外部份英文字母下方的勾勾 (如: gj) 則是垂直 overflow 的主因.
• 淺綠色區塊的 CSS 不論是上下 margin 1em, 或者是 4px 都無法把垂直 overflow 吃掉, 所以我修改紫色區塊的 padding 為上下 1px
• 而修改紫色區塊的 margin 左右 1px 剛好修正了水平捲動時 browser 區塊大小計算上的小 bug
• 紅色區塊的 padding 左右 4px 剛好和淺綠色區塊的 margin 上下 4px 組成了一個邊框

highlight.js