Chih筆記: Blogger

方便Blogger使用的方法：
在設計，修改HTML裡的</head>之前貼上下面這兩句，<link href=...的css連結可以更換樣式。
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript">
</script>

然後在網頁載入時啟動
<body onload='prettyprint()'>

使用時，用<pre class="prettyprint"></pre>框住程式碼就可以了。

可以與SyntaxHighlighter共用，只是class內容不同。
個人比較偏向使用SyntaxHighlighter，因為在測試google-code-prettify的時候，會有些程式碼跑不出來。

使用SyntaxHighlighter 提供的免費API，首先選取Blogger的設定 > 修改HTML，在</head>前貼上以下程式碼。


<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>


接著在撰寫程式碼文章時，切換到"修改HTML"，在程式碼開頭及結束加上以下這兩行。
<pre class="brush: c#">
print "aaa";
</pre>

Chih筆記

2011年8月15日星期一

[Blogger] 撰寫程式碼文章 google-code-prettify

[Blogger] 撰寫程式碼文章 SyntaxHighlighter

2011年8月15日 星期一

[Blogger] 撰寫程式碼文章 google-code-prettify

[Blogger] 撰寫程式碼文章 SyntaxHighlighter

2011年8月15日星期一