八月 28, 2007

dp.SyntaxHighLighter的程式碼上色

如果要在部落格中顯示程式碼,可以採用 dp.SyntaxHighLighter的程式碼上色方法。

 if (!defined( "PLOG_CLASS_PATH" )) {
        define( "PLOG_CLASS_PATH", dirname(__FILE__)."/");
    }



下載位址 http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.1.rar

目前研習中心的部落格已經提供上面的程式

你只需要自行在自訂模板中 footer.template 加入如下黃色部份

<DIV id=footer></DIV>
<DIV style="CLEAR: both">&nbsp;</DIV>

</DIV>

<!-- SyntaxHighlighter Start -->

<link type="text/css" rel="stylesheet" href="/lifetype/SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="/lifetype/SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="/lifetype/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="/lifetype/SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/lifetype/SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

<!-- SyntaxHighlighter End -->

</BODY>
</HTML>

接著文章中就可以進入 html 原始碼中加入如下

<pre name="code" class="php">

if (!defined( "PLOG_CLASS_PATH" )) {
define( "PLOG_CLASS_PATH", dirname(__FILE__)."/");
}


</pre>


支援的語言有

Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt


使用方式還可以配合

nogutter Will display no gutter.
nocontrols Will display no controls at the top.
collapse Will collapse the block by default.
firstline[value] Will begin line count at value. Default value is 1.
showcolumns Will show row columns in the first line.

範例

<pre name="code" class="html:nocontrols:firstline[10]">
... some code here ...
</pre>


延伸閱讀

http://code.google.com/p/syntaxhighlighter/


發佈者: 陳怡杰 老師 at 19:47│  點閱次數 (492)│ 修改文章管理迴響迴響 (0)部落格學習筆記
回應文章
(必要)
authimage