2009年9月27日 星期日

Using SyntaxHighlighter on Blogger

1. 下載 SyntaxHighlighter
2. 上傳 scripts 和 styles 資料夾內的檔案至網站上(可只選擇自己需要的程式語言主題)
3. Layout -> Edit HTML -> 將下列程式碼貼在 < /head > 前



<!-- Syntax Highlighter Block start here -->
<link href='[ YOUR_SITE ]/shcore.css' rel='stylesheet' type='text/css'/>
<link href='[ YOUR_SITE ]/shthemedefault.css' id='shTheme' rel='stylesheet' type='text/css'/>
<script src='[ YOUR_SITE ]/shcore.js' type='text/javascript'></script>
<script src='[ YOUR_SITE ]/shbrushbash.js' type='text/javascript'></script>
<script src='[ YOUR_SITE ]/shbrushcpp.js' type='text/javascript'></script>
<script src='[ YOUR_SITE ]/shbrushplain.js' type='text/javascript'></script>
<script src='[ YOUR_SITE ]/shbrushpython.js' type='text/javascript'></script>
<script src='[ YOUR_SITE ]/shbrushsql.js' type='text/javascript'></script>
<script src='[ YOUR_SITE ]/shbrushxml.js' type='text/javascript'></script>
<script class='javascript'>
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>
<!-- Syntax Highlighter Block End here -->


將 [ YOUR_SITE ] 改成上傳 SyntaxHighlighter 的網址,並注意檔案名稱大小寫,依個人所需增減不同的程式語言(上面是我自己所用的不包含全部)和主題
另外,不要問我為什麼跟一堆教學寫的不同,因為我也是試了一個上午都搞不定,最後複製某網站的原始碼才成功...

使用方法如下:

<pre class="brush: BRUSH ALIASES ">
code
</pre>


把 BRUSH ALIASES 換成要用的程式語言,並記得將 < 換成 &amp;lt; 就行了

沒有留言: