BloggerでSyntaxHighlighterを使用する方法

Syntax Highlighter Scripts Generatorを 使用しろと紹介してあるサイトが多いようだが、2014/10/24現在、リンクが切れてしまっていて良く分からないので、別の方法で BloggerでSyntaxHighlighterを使用する方法を調べてみた。 SyntaxHighlighterの公式ページのInstallationを見ると

<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>

<!--
    At least one brush, here we choose JS. You need to include a brush for every 
    language you want to highlight
-->
<script type="text/javascript" src="css/shBrushJScript.js"></script>

<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />

<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

<pre class="brush: js">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

となっている。ここに含まれる導入に必要な手順は次の5つ

1. コアとなるJavaScriptファイルを読み込む
   <script type="text/javascript" src="js/shCore.js"></script>
2. ハイライトしたい言語に応じたJavaScriptファイルを読み込む。この例はJavaScriptの場合となる。
   <script type="text/javascript" src="css/shBrushJScript.js"></script>
3. コアとなるcssファイルとデフォルトテーマのcssを読み込む
   <link href="css/shCore.css" rel="stylesheet" type="text/css" />
   <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
4. 以下のコードをWebページに記述して、ここまでに読み込みをしたファイルに書かれているSyntaxHighlighterを実行する
   <script type="text/javascript">
   SyntaxHighlighter.all()
   </script>
   
5. 投稿する文章の中でハイライトするコードの部分を<pre class="brush: js"></pre>または<script type="syntaxhighlighter" class="brush: js"><![CDATA[]]></script>で囲む(例はハイライトしたい言語がJavaScriptの場合)

これで、記述したコードがハイライトされて表示される。

ただし！！

これは自宅サーバーやファイルのアップロードが可能なレンタルサーバーなどの場合の話。ファイルのアップロードができないBloggerではこの方法は使えない。 なんだ・・・結局、ダメじゃん、とあきらめる事なかれ。公式によって次の方法が用意されている。

Hosting

この方法を使用することにより、ダウンロードしなくてもホスティングされたファイルをリンクすることによって、ダウンロードした場合と同じように機能が利用できる。 先ほどのコードを、このホスティングの場合に置き換えたのがこちら

    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <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 type='text/javascript'>
        SyntaxHighlighter.all()
    </script>

これを、Bloggerの、テンプレート -> HTMLの編集で表示されるHTMLコードに追加する。

    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <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'/>

は、WebサイトでCSSファイル、JavaScriptファイルを読み込む時と同じように、上の方にある</head>の直前に追加する。

    <script type='text/javascript'>
        SyntaxHighlighter.all()
    </script>

は、下の方にある</body>の直前に追加する。

これで、<pre class="brush: js"></pre>または<script type="syntaxhighlighter" class="brush: js"><![CDATA[]]></script>で囲ったコードが ハイライトされて表示される。