SyntaxHighlighterのサイトよりホスティングされているjsファイルやcssファイルを下記のようにBloggerのテンプレートにセットします。
※その他の言語にSyntaxHighlighterを使用する場合は、別途必要なファイルを追加してください。
<head> <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/shBrushCss.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/shBrushPhp.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/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> <script type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf"; SyntaxHighlighter.all(); </script> </head>
上記で実装は完了です。
SyntaxHighlihgterを記事で使用するには下記のような記述で使用できます。
エスケープ必要記述
<pre class="brush: plain"> エスケープした内容を記述 </pre>
エスケープ不要記述
<script type='syntaxhighlighter' class='brush: plain'><![CDATA[ 内容を記述 ]]></script>