http://alexgorbatchev.com/SyntaxHighlighter/
2. 找到一個網路空間,將以下檔案上傳,可以上傳至"Google Site"
syntaxhighlighter_3.0.83\styles\shCore.css syntaxhighlighter_3.0.83\styles\shThemeDefault.css syntaxhighlighter_3.0.83\scripts\shCore.js syntaxhighlighter_3.0.83\scripts\shBrushBash.js syntaxhighlighter_3.0.83\scripts\shBrushCpp.js syntaxhighlighter_3.0.83\scripts\shBrushDiff.js syntaxhighlighter_3.0.83\scripts\shBrushPlain.js syntaxhighlighter_3.0.83\scripts\shBrushXml.js syntaxhighlighter_3.0.83\scripts\shBrushCss.js3. 從Google Site找到這些檔案的超連結,將它填入下面的HTML語法中
範本-> 編輯HTML,將以下語法加到<head>之後。
<link href='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shCore.css' rel='stylesheet' type='text/css'/> <link href='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shCore.js' type='text/javascript'/> <script src='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shBrushBash.js' type='text/javascript'/> <script src='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shBrushCpp.js' type='text/javascript'/> <script src='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shBrushDiff.js' type='text/javascript'/> <script src='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shBrushPlain.js' type='text/javascript'/> <script src='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shBrushXml.js' type='text/javascript'/> <script src='https://sites.google.com/site/english0815/Home/syntaxhighlighter/shBrushCss.js' type='text/javascript'/> <script type='text/javascript'> SyntaxHighlighter.all() </script>4. 在網誌裡新增程式碼
<pre class="brush: xml"> public class HelloWorld { public static void main (String[] args) { System.out.println("Hello, world!"); } } </pre>以下為顯示結果
public class HelloWorld { public static void main (String[] args) { System.out.println("Hello, world!"); } }5. 如遇到HTML語法<或>符號,需透過以下網址轉換語法,才可以正常顯示
HTML Encoder
6.1. 你可能會發現垂直捲軸會被顯示在框架中,可以修改syntaxhighlighter_3.0.83\styles\shCore.css來隱藏垂直捲軸
.syntaxhighlighter { width: 100% !important; margin: 1em 0 1em 0 !important; position: relative !important; overflow:auto !important; font-size: 12px; }to
.syntaxhighlighter { width: 100% !important; margin: 1em 0 1em 0 !important; position: relative !important; overflow-x:auto !important; overflow-y:hidden !important; font-size: 12px; }6.2. 你可能會發現框架中會有多餘的空白出現,可以修改syntaxhighlighter_3.0.83\styles\shCore.css來去除這些空白行
.syntaxhighlighter { .syntaxhighlighter table td.gutter .line { text-align: right !important; padding: 0 0.5em 0 1em !important; } }to
.syntaxhighlighter { .syntaxhighlighter table td.gutter .line { text-align: right !important; padding: 0 5px !important; } }7. 參考資料
How To Add Syntax Highlighter for Blogger/Blogspot
Extra Lines using SyntaxHighlighter for Chrome Only?