1,594 瀏覽數

WordPress Plugin – SyntaxHighlighter

從開始使用 CMS (Content management syste) 也就是架網站系統就很羨慕別人的程式碼是顯示程下面的樣式,但以前使用 Drupal 沒刻意找,但現在使用 wordpress 卻不經意找到了.也可能是 wordpress 使用的人比較多吧!!

# ll
drwxr-xr-x 6 nobody  65534  4096 May 15 10:35 wp-content
# chown apache:apache wp-content
drwxr-xr-x 6 apache apache 4096 May 15 10:35 wp-content

使用也很簡單,去下載 WordPress Plugin – SyntaxHighlighter 啟動它,然在在你的文章加入

[php]your code here[php]
顯示結果:

your code here

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”example-filename.php”]your code here[/css]

顯示結果:

your code here

[code lang=”js”]your code here[/code]

顯示結果:

your code here

[sourcecode language=”plain”]your code here[/sourcecode]

顯示結果:

your code here

有時候放在 SyntaxHighlighter 程式碼可能太長,佔去螢幕太多空間,這時候我們可以設定一下 SyntaxHighlighter 顯示的高度上限.

# vi ./wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css 
.syntaxhighlighter {
    max-height: 450px;
    width: 100% !important;
    overflow: auto !important;
    overflow-y: auto !important;
    /*overflow-y: hidden !important;*/
}

主要增加 max-height: 450px;(限制最高高度為 450px ,沒超過的不受影響) 並修改 overflow-y: auto !important; (Y軸 顯示 scroll bar)

發表迴響