てぃーだブログの記事投稿で Syntaxhighlighter を設定する

記事投稿で Syntaxhighlighter を呼び出す

記事投稿時に Syntaxhighlighter を呼び出す方法は大きく分けてふたつあります。本家サイトでは <pre /> メソッドと <script /> メソッドとして説明されています。

  Installation

上記 Installation の Basic Steps として以下の様に設定手順が書いてあります。

Basic Steps

To get SyntaxHighlighter to work on you page, you need to do the following:
(シンタックスハイライターを動かすには あなたのページ上で次のことを行ってください:)

1. Add base files to your page: shCore.js and shCore.css
　(あなたのページに基本ファイルを追加します: shCore.js と shCore.css です)

2. Add brushes that you want
　(あなたの必要なブラシを追加します)

3. Include shCore.css and shThemeDefault.css
　(shCore.css と shThemeDefault.css も含めます)

4. Create a code snippet with either <pre /> or <script /> method
　(コードスニペットを書いてください <pre /> または <script /> いずれかのメソッドで

5. Call SyntaxHighlighter.all() JavaScript method
　(SyntaxHighlighter.all() JavaScript メソッドを呼び出してください)

前回までの設定はここでいう 1, 2, 3, 5 番目の設定をしていたことになります。つまり、 記事投稿時に必要な設定は 4 番目の設定だけです。

説明によると <pre /> タグを使った呼び出しと <script /> タグを使った呼び出しがあるとのことです。

それぞれに長所と短所がある様ですが、解説を比較してみる限り、<script /> メソッドはデメリット (PROBLEMS) が多すぎて、ちょっと使う気にはなれません。

また、"ブログで使うなら <pre /> メソッドを使った方が良い" と公式に書いてありましたので僕は <pre /> メソッドを使っています。<script /> メソッドは試していません。

<pre /> メソッドの書き方

こんな感じで書きます。と一例があげられています。<pre /> タグのクラスにブラシを指定しています。

<pre class="brush: js"> 

    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter