SyntaxHighlighter 小改善

Work Hard Play Hard

雖然使用 cdnjs 的 SyntaxHighlighter 比放在 Dropbox 快十倍﹐但在 Dropbox 那個版本我有改過﹐所以還未轉過去﹐今日決定搞搞佢。

沒有改過的版本會有 Scrollbar 出現

首先解決如果字體 size 大的話﹐行數足夠也會有 Vertical Scroll Bar 出現的問題。

解決方法非常簡單﹐只要將每行的高度增加少許就可以了：

body .syntaxhighlighter .line {
        line-height: 1.2em !important; /* make the vertical scroll bar disappear */
}

另外希望 code block 可以多行顯示﹐使 Horizontal Scroll Bar 不會出現﹐這要也可以藉加入以下 CSS 解決：

body .syntaxhighlighter .line {
        white-space: pre-wrap !important; /* make code wrap */
}

但這樣做會令所有 code block 都換行﹐在閱讀 Program 時會變得很不方便﹐其實可以稍為修改一下

body .prewrap .syntaxhighlighter .line {
        white-space: pre-wrap !important; /* make code wrap */
}

如果加入多一層 class="prewrap" 的 html element﹐highlight 的 code block 就會換行﹐而原本沒有加入的就照以前一樣﹐這樣解決問題之餘也可向後兼容。

<span class="prewrap>
        <pre class="brush: text">Your looooooooooong code here! and blahblahblah</pre>
</span>

不過左邊的行數沒有根隨右邊的 code 換行﹐多行顥示是會有對錯行數的情況出現﹐所以只建議在顯示一些 Description 時用。

修改後順眼多了