こんにちはーヽ(´ー`)ノ
今回はlivedoorブログにSyntaxHighlighterを適用する方法をメモっておこうかと思います。

最近、社内SEの内情よりlivedoorブログカスタマイズネタが多めですね・・・


SyntaxHighlighterってなに?

ネットでソースコードを検索してると、たまに
using System; 
for (n = 1; n < Length; n++)
{
     for ( i = Length - 1; i >= n; i++) 
     { 
            if (nums[i-1] > nums[i])
            { 
                // 要素を交換
                t - nums[i-1];
                nums[i-1] = nums[i];
                nums[i] = t;
            } 
      }
} 
のようにソースコードがエディタで見たような感じで装飾されているのを見ませんか?

このようにjava scriptでwebページ上の装飾を行ってくれるのがSyntaxHighlighterです。
ちなみに上記はただのC#で書かれたバブルソートで、これを選んだ意味は特にありません(笑)

※注意
この記事は「SyntaxHighlighter version 3.0.83」について書いています。
メジャーバージョンが一緒(version 3.XXなど)では大きく変化はないと思いますが、
version 1.XX、2.XX、の場合、また今後、4.XXがリリースされるような場合はやり方が変わるかと思います。

ステップ1 SyntaxHighlighterをダウンロードする

下記からダウンロードします。
SyntaxHighlighter 3.0.83

メニューから[download]に移動して、
"The latest SyntaxHighlighter version is 3.0.83. Click here to download. "からダウンロードしましょう。

ダウンロードして解凍するとこんな感じでしょう


ステップ2 livedoorブログにフォルダ構造を作成する

必要なファイルをアップロードするためのフォルダ構造を作成します。
ポイントはダウンロードしたsyntaxhighliterと同じ階層構造で作成することです。

ブログ管理画面から「画像/ファイル」を選択します。


「ファイル管理」タブを開いて、「フォルダを作る」から
「syntaxhighliter」フォルダを作成しましょう。


次に作成した「syntaxhighliter」フォルダをクリックして、その配下に同じ要領で
「scripts」フォルダ、
「styles」フォルダ を作成しましょう。



ステップ3 必要なファイルをアップロードする

次に 先ほど作成したフォルダに対して必要なファイルをアップロードしていきます。
各フォルダを選択して「アップロード」でアップしていきます。

まず、「scripts」フォルダ
先ほどダウンロードしたsyntaxhighlighterの同じく「scripts」フォルダ内のファイルをここにアップロードします。
最低限必要なのは下記。
  • shAutoloader.js
  • shCore.js
後は装飾表示させたい言語に対応したファイルをアップロードします。
例えばXMLならshBrushXml.js
私は使うとしたらBash/shell、C#、CSS、JavaScript、XMLくらいかなーと思ってこんな感じです。


※注意

後述しますが、この記事で書いている方法だと、
livedoorブログの文字数制限でこれより多い種類を適用できません・・・

次に「styles」フォルダ
これも同じく先ほどダウンロードした「styles」フォルダ内のファイルをアップロードしていきます。
最低限必要なのはひとつ
  • shCore.css

stylesフォルダ内のファイルはソースコードを装飾表示するスタイルテーマですが、私はデフォルトでいいかなーと思い、それだけアップロードしています。
  • shThemeDefault.css

アップロード後はこんな感じ。
 

ステップ4 適用するためのjava scriptを記述する

さて必要なファイルをアップロードしたら、それらを読み込むjava scriptを記述します。
htmlのヘッダー内に書きます。
livedoorブログではトップページ、個別記事ページなどのソースコードを弄れるのでそれぞれ記述してもいいのですが、これらはデザイン変更すると消えてしまいます。

そのたびにまた書くのは少し面倒なので、それを回避するために用意されている「カスタムJS」、ここに書いちゃいましょう。

ブログ管理画面より「ブログ設定」-「デザイン / ブログパーツ設定 PC」-「カスタムJS」
「head内」
<link href="http://<自分のブログURL>/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css">
<link href="http://<自分のブログURL>/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://<自分のブログURL>/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://<自分のブログURL>/syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://<自分のブログURL>/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://<自分のブログURL>/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://<自分のブログURL>/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://<自分のブログURL>/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript">SyntaxHighlighter.all()</script>
<自分のブログURL>はそれぞれ置き換えてくださいね 。
また、必要に応じてBrushファイル名を変えてください。

※注意
この「カスタムJS」なんと文字数制限があります!
上記くらいが限界です。
このURLをlivedoor独自タグ<$BlogUrl$>などに置き換えられたらもう少し文字数稼げると思うのですが、
とりあえず困ってないのでそこらへんの検証は後回しにしています笑


SyntaxHighlighterの使い方

じゃあさっそく使ってみましょう。
使い方は、装飾したいソースコードを<pre>タグで囲うだけです。
<pre  class="brush: 言語">

装飾したいソースコード
・
・

</pre>

また、上記のように、htmlやXMLなどタグ囲いされたソースコードを装飾する場合は、
< を &lt;
> を &gt;
にエンコードして記載するといいでしょう


これでブログに載せたソースコードがグっと見やすくなりますねヽ(´ー`)ノ