在Blogger中加入程式碼顯示(利用Syntax highlighter)

Step 1. 在Blogger中打開設計->編輯HTML->找到</head>的標籤, 在</head>之前, 加入底下程式碼:

<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js" type="text/javascript">
</script>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

ps. 假如你喜歡像我顯示Flash的copy與顯示原始碼的功能, 就要使用2.0版的, 3.0版我測試怎樣都弄不出來那個功能.

Step 2: 在要顯示程式碼的程式前後加上<pre>標籤與要顯示程式碼的語言類別, 
如JavaScript就是:
 <pre class="brush: js"> ...你的程式碼... </pre>

如c語言就是:

 <pre class="brush: c"> ...你的程式碼... </pre>

範例如下:
<pre class="brush: js">
/**
 * SyntaxHighlighter
 */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
</pre>

執行結果:

/**
 * SyntaxHighlighter
 */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }

	/**
	* SyntaxHighlighter
	*/
	function foo()
	{
	if (counter <= 10)
	return;
	// it works!
	}

view raw gistfile1.txt hosted with ❤ by GitHub

收工!