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?
沒有留言:
張貼留言