本文引用自weiyiao - 在痞客邦 使用 SyntaxHighlighter 2.0
如果自己是喜歡在 Blog 中分享程式碼,那麼你一定不可以錯過「SyntaxHighlighter」這個工具,SyntaxHighlighter 可以讓自己的 Blog,排出漂亮的程式碼,另外支援原始碼瀏覽、剪貼與列印等功能,可以說是相當地實用喔!
由於 Pixnet 無法上傳 Javascript 檔案以及 CSS 檔案,因此需要將本來應該要放在 <head> 底下的程式碼放到其他地方去了,怎麼設定呢?
請到 Pixnet 的管理後台 → 部落格管理的 側邊欄位設定 → 頁尾描述 (也可以放在其他地方,只要你喜歡就可以了) → 設定 → 請將下面的程式碼貼上即可:
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDelphi.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js"></script> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" id="shTheme"/>
由於預設值是使用 <pre> 來當做要 Highlight 的對象,由於測試了幾次後,因此要呈現程式碼的編碼方式的高亮度呈現,請切換到原始碼模式將下面的程式打上,並且標示其 calss 為class="brush: csharp" ,brush 後面的內容請依照您要的格式變更,可參考下面的列表。
| Brush name | Brush aliases | File name |
| Bash/shell | bash, shell | shBrushBash.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| Python | plain, text | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
最後,就可以看到你想要的效果了。
Example:
Source
<pre class="brush: php; highlight: [5, 15]; html-script: true">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SyntaxHighlighter Demo Page - <?= htmlspecialchars(title) ?></title>
</head>
<body>
<?
/***********************************
** Multiline block comments
**********************************/
stringWithUrl = "http://alexgorbatchev.com";
stringWithOutUrl = 'hello world';
ob_start("parseOutputBuffer");// Start Code Buffering
session_start();
function parseOutputBuffer(buf) {
global portal_small_code, portal_gzcompress;
global PHP_SELF, HTTP_ACCEPT_ENCODING;
// cleaning out the code.
if(portal_small_code && !portal_gzcompress) {
buf = str_replace("", "", buf);
buf = str_replace("\n", "", buf);
buf = str_replace(chr(13), "", buf);
}
}
?>
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -->
</body>
</html>
</pre>
Result
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SyntaxHighlighter Demo Page - <?= htmlspecialchars(title) ?></title>
</head>
<body>
<?
/***********************************
** Multiline block comments
**********************************/
stringWithUrl = "http://alexgorbatchev.com";
stringWithOutUrl = 'hello world';
ob_start("parseOutputBuffer");// Start Code Buffering
session_start();
function parseOutputBuffer(buf) {
global portal_small_code, portal_gzcompress;
global PHP_SELF, HTTP_ACCEPT_ENCODING;
// cleaning out the code.
if(portal_small_code && !portal_gzcompress) {
buf = str_replace("", "", buf);
buf = str_replace("\n", "", buf);
buf = str_replace(chr(13), "", buf);
}
}
?>
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -->
</body>
</html>
文章標籤
全站熱搜
Blog 技巧收藏 (1)
