Blogger筆記－SyntaxHighlighter放進Blogger

越來越覺得在Blogger上寫code上去很麻煩，看看別人的排的真好看，找半天找到這個很多人在用的javascript library: SyntaxHighlighter。

看了一下還蠻容易使用的。

Step1. 先到Blogger的範本，按“編輯HTML”，如下圖

Step2. 找到</head>

Step3. 在</head>前面貼下下面的code

<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/shBrushCss.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/shBrushXml.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/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.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/shBrushCpp.js' type='text/javascript'/>
<script type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Step4. 加入code。
在HTML格式下加入<pre code="brush: html" name="code"></pre>，回到撰寫模式再copy你的程式進來即可。

實際使用後發現一定要發佈後才看得到效果，無法在編輯時看到，感覺還真是有點點不方便，但免費的能用就好。

另外，為了更好看些（我個人認為），所以我又加入了底下的css，加在script的後面，會讓程式碼被有陰影的框線框起來

<style type="text/css">
.syntaxhighlighter {
 border: 1px solid #999;
 padding: 5px;
 border-radius: 5px;
 box-shadow: inset 0px 0px 4px #555;
}
</style>

參考網址：
SyntaxHighlighter官網
【Blog】Blogger上安裝SyntaxHighlighter
SyntaxHighlighter 在 Blogger 的使用教學