Google Blog中輸入Html程式碼，他會用htmlencode去轉碼，結果跑出來的變成編碼的資料，因此要自己先動手轉，最簡單的方是就是使用這個工具BloggerPaste，將程式碼轉過後直接貼上即可
但如果我們希望在Blog上顯示漂亮的程式碼，可以增加SyntaxHighlighter這個外掛，增加的方式如下
在設定中的版面配置編輯Html，搜尋<b:skin>，在這個Tag前加入以下代碼
<!-- SyntaxHighlighter 3.0.83--> <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/shAutoloader.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.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/shBrushCpp.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/shBrushDelphi.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.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/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushPlain.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.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/shBrushScala.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 type='text/javascript'> SyntaxHighlighter.all(); </script>
掛上以後不曉得什麼原因，要等一段時間CSS才能夠發生作用，過程中一直在等待csi.gstatic.com，這個似乎是google的統計程式，我去測試別人的網站跑起來卻不會等待那麼久，原本以為是直接使用官網的css跟js檔會比較慢，但我將他掛到自己的網站上也是相同的狀況，後來將Blog上的一些小工具移除，最後發現是我本來掛的這個記數器造成了這個問題flagcounter不過也不清楚為什麼這個會跟Google相衝
使用了SyntaxHighlighter會讓網頁速度下降，如果想要提升載入速度的話，可以參考下面這篇，不過我目前是沒有這樣用
http://dahao.blogspot.tw/2011/08/syntaxhighlighter.html
另外一個提升速度的是人工的去載入自己所需要的js檔即可(應該沒有人會他列表上全部的語言吧..)
如果不想用外掛元件的話，可以使用下面這個網站做簡單的程式碼Format
http://formatmysourcecode.blogspot.tw/
一切備妥後就可以開始使用，使用的方式如下
<pre class="brush: groovy"> <html></htm> </pre>
這邊要注意所有tag都要進行轉換，使用文章一開始提到的BloggerPaste進行編碼，編碼時要注意，不要把pre也拿進去編碼了
關鍵字
google blog html 語法
blogspot 程式碼
syntaxhighlighter 顯示 速度
參考資料
http://cw1057.blogspot.tw/2011/01/google-html-tags.html
http://save-coco.blogspot.tw/2008/12/test_11.html
http://blog.lyhdev.com/2010/09/bloggersyntaxhighlighter.html
http://hougii.blogspot.tw/2012/05/blog-post_07.html
沒有留言:
張貼留言