how to setup syntax highlighter on blogger
手順は以下になります．
- blogger テンプレートを "HTMLで編集" で開きます．
- テンプレートの <b:skin> タグの内容の末尾(CDATA内)に下記サイトのコードを追加します．http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
- 下記の <script> タグを， テンプレートの <head> タグの内容の末尾に追加します．
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
- 下記のコードをテンプレートの </body> タグの内容の末尾に追加します．
<script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script> - テンプレートの編集はここまでです．テンプレートを保存します．
- <pre> タグの， <name> 属性に "code" を，<class> 属性にハイライトを適用したいプログラミング言語を指定することで，SyntaxHighligher を使用できます．
たとえば，php の場合は class に "php" を指定します．
SyntaxHighligher を適用すると以下のように表示されます．文字列が青にハイライトされています．
<pre name="code" class="php"> echo "I like PHP"; </pre>echo "I like PHP";
- <pre> タグ内のコードはエスケープする必要がありますが，エスケープ前のテキストからエスケープしたテキストを得るには下記のサイトが有用です．
Quick escape - サポートする言語の一覧は下記の URL で参照できます．
http://code.google.com/p/syntaxhighlighter/wiki/Languages
設定は以上です．
本内容の設定後に別のテンプレートに変更すると本変更内容は消えてしまうようですのでご注意ください．
SyntaxHighligher を使用すると，とても見やすくなりますね！
