2010年5月13日 星期四

網頁程式碼排版

Awesome code syntax highlighting made easy
這篇文章說明如何設定「程式碼排版」,以下簡單介紹設定步驟。
1. 在</head>之前加入以下程式碼,其中要編排C#需要引入shBrushCSharp.js,使用shThemeDefault.css風格排版。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>

2. 在</body>之前加入以下程式碼。

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

3. 在<pre></pre>之間加入你的程式碼,class="brush: csharp"可以替換成你需要排版的程式語言。

<pre class="brush: csharp">

</pre>

4. 如果要顯示HTML,可以使用Quick Escape轉換HTML標籤。

SyntaxHighlighter
Quick Escape