以Blogger為例，請先進入設計頁面「修改 HTML」，找到<head>與</head>之間放入以下程式碼：
<!--SYNTAX HIGHLIGHTER BEGINS--> <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> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script> <!--SYNTAX HIGHLIGHTER ENDS-->
其中"shCore.css"、"shCore.js"為必要檔，"shThemeDefault.css"為版面佈景主題，可以至CSS Themes挑選，"shBrushPhp.js"為支援PHP語法之Javascript程式，可依照需求到Bundled Brushes選擇需要掛載的程式，例如C++、C#、CSS等其他語言。
上述範例程式掛載檔案的路徑來自官方網站，版本會不斷更新，若有需要也可以自行下載後上傳至網路伺服器，或許運行速度能更順暢。
接著請到Blogger新文章的「修改 HTML」介面，將程式碼如以下方式加入：
<pre class="brush: php"> //Start of your PHP code <php? echo "Hello world!"; ?> //End of your PHP code </pre>
即可顯示如本篇文章程式碼顯示的效果，並可依照需要修改要參照的語法。值得注意的是，在<pre>與</pre>之間的程式碼因為會被當成HTML解譯，所以最好經過postable這個小程式的轉換，避開"<"、">"等字元，這樣一來就可以更方便地在Blogger貼上程式碼了。
<參考資料來源>
[cyberack} - Adding a Syntax Highlighter to your Blogger blog
Browny Walking - Blogger 上安裝 Syntax Highlighter
No comments:
Post a Comment