これまでBloggerブログにて、
スポンサーリンク
Syntax Highlighterの導入に苦労されている方は、
多かったのではないでしょうか？
beautifulofcodeの導入も同様に苦労されている方は、
多かったと思います。
私自身も、その一人でした。
ですが、
上記してあるように
Syntaxhighlight簡単に導入する方法を以下に記載します。
これまで、
使用したかったのにできなかった方、
これから導入しようと考えている方など、
参考にして頂けると嬉しいです。
＊利用方法に関してですが、
これまで、Bloggerブログなどに多く記載されていた
利用方法とは若干異なりますので注意して下さい。
以下ソースを
<head>～</head>内に記載するだけでOKです。
<!-- Syntax Highlighter -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
3行目のThemeCSSですが、
以下よりいくつか選べます。
→SyntaxHighlighter - Themes
そして、
コードの貼り方ですが、
上記の通りこれまでの貼り方（利用方法）とは若干異なります。
以前まで良くBloggerブログなど多くの他社ブログなどで記載されていた
利用方法の以下とは異なりますので、注意です。
【これまでの利用方法１】
<pre class="code">
<code class="html">
//classにはコードの種類
//boc-collapseを追加すると、閉じた状態にしておけます。
ここにコードを記述する
</code>
</pre>
【これまでの利用方法２】
<pre name="code" class="java">
『ここにコード記述』
< /pre>
【これからの利用方法】
<pre class="brush: script-type">
script-typeにjsとかjavaと指定して、ここにソースコードをHTMLエスケープして貼り付ける
</pre>
となります。
Google Codeに予めホストされたものを利用していますが、
元ファイルは『こちら』にあります。
実際に利用する場合は、
HTMLタグをそのまま入力して表示することができないので、
変換ツールを利用すると便利です。
こちら→HTMLタグ変換ツール
クリボウさんにて作成もされていました。
→コードをハイライトする「Blogger Syntax Highlighter」ウィジェット
（サイトの一番下部に変換ツールがあります。）
