Syntax Highlighter 3.0の使用方法

ブログに貼り付けるソースコードを整形（行番号付け、キーワードのハイライトなど）を行うSyntax Highlighterを2.1から最新の3.0に更新しました。私はココログを使用しているため、ココログに依存した情報になりますが設定手順を記載します。

SyntaxHighlighter 3.0での改善点

• 2.xでは、IEだと横スクロールがうまく表示できず、長い行は折り返し（Wrap Lines）表示にしていたのですが、横スクロールが正常動作するようになりました
• 行番号を含まないソースコードのコピーはツールバーの"Copy to clipbord"を選択する必要がありましたが、3.0ではブラウザの画面でコピーしたい行を直接選択しCTRL-Cでクリップボードにコピーができるようになりました。また、ソースコードをダブルクリックするとソース全体を選択できます
• 2.xではソースコードのコピーにFlashを使用していたのですが、最近の風潮（？）に従いFlashレスに・・

SyntaxHighlighterのブログサーバーへのアップロード

1. SyntaxHighlighterのファイルをここからダウンロードします。
   
2. ココログの、「管理ページトップ  >  コントロールパネル  >  ファイルマネージャー」に移動し、以下のフォルダーを作成（フォルダー名はなんでもよいです）
   ・Scripts3
   ・Styles3
   
3. ダウンロードしたzipファイルのscriptsフォルダーから整形したい言語に対応したBrushファイルと呼ばれるJavaScriptを、ブログのScripts3フォルダーにアップロード。zipファイルには28種類のBrushファイルが入っていますが、ページ表示毎にサーバーからBrushファイルが読み込まれるため、サーバーレスポンスの遅延を少なくするために必要最小限のBrushファイルを使用するのがよいと思います。私は以下のBrushファイルをアップしています
   ・shCore.js
   ・shBrushCSharp.js
   ・shBrushCpp.js
   ・shBrushJScript.js
   ・shBrushXml.js
   ・shBrushPlain.js
   
4. zipファイルstylesフォルダーから、以下のファイルをブログのStyles3フォルダーにアップロード
   ・shCore.css
   ・shThemeDefault.css
   表示テーマを変えたい場合は、shThemeDefault.css以外をアップします。
   
5. ブログページにアクセスした際に、SyntaxHighlighterを起動するために、
   「管理ページトップ  >  ブログ一覧  >  PS3とLinux、電子工作も  >  設定  >  ブログの基本情報」
   に移動し、以下の指定を「ブログのサブタイトル（キャッチフレーズ）」の末尾にペースト（http://以下はファイルをアップロードしたブログサーバーのurlを指定）

<link type="text/css" rel="stylesheet" href="http://todotani.cocolog-nifty.com/Styles3/shCore.css" />

<link type="text/css" rel="stylesheet" href="http://todotani.cocolog-nifty.com/Styles3/shThemeDefault.css"/>

<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts3/shCore.js"></script>

<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts3/shBrushCpp.js"></script>

<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts3/shBrushCSharp.js"></script>

<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts3/shBrushXml.js"></script>

<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts3/shBrushPlain.js"></script>

<script type="text/javascript">

   SyntaxHighlighter.all();

</script>

Windows Live Writerのプラグイン

私はブログの編集投稿にLive Writerを使っています。先日Windows Live Essentials 2011にアップデートを行ったため2011ベースとなりますが、SyntaxHighlighter用プラグインの設定について記載します。ちなみに、Live 2011のサポートOSにはXPの記載がありませんでした。

SyntaxHighlighter用のプラグインとして、以前はPreCodeを使っていたのですが、Syntax Higlighter 2.0 for Windows Live Writerに変更しました。PreCodeに対して、挿入したコードブロックを<Div>タグでくくってくれるため管理がしやすい点や、挿入後も表示形式などのオプションパラメーターの変更ができる点がナイスです。ただ、デフォルト設定が自分好みでなく変えられない点が惜しい。

Live Writer + SyntaxHighlighterはココログと若干相性が悪く最初にブログエントリを投稿した時点では、SyntaxHighlighterを使ったソースコードをブラウザーで閲覧すると、改行部分に<br></p>などのhtmlタグが混入してしまいます。私の環境では、再度同一エントリを投稿してサーバー上の文書を上書きしてやると余分なhtmlタグが表示されなくなります。あと挿入するオリジナルソースの改行コードも影響している模様で、改行コードとしてCR+LFを使ったWindows形式で保存したファイルからSyntaxHighlighterにコピペしないと、上書きを行っても<br><p>が消えないことがありました。

余計なhtmlタグが挿入された場合、ブラウザを使ってブログ管理画面経由で編集を行うと、余計な改行が大量に挿入されたりして収拾がつかなくなりますので、編集はSyntaxHighlighter一本で行う必要があります。

その他

Windowsクライアントでのブログの見栄え向上のためにメイリオフォントを指定する方法は、以前の設定からカスタムCSSを使用する方法に変更しました。「管理ページトップ  >  ブログ一覧  >  PS3とLinux、電子工作も  >  デザイン  >  カスタムCSSを編集」に移動して、以下のCSS定義を設定します。

body {
    font-family: 'メイリオ', 'Meiryo','MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    }
 
textarea {
    font-family: 'メイリオ', 'Meiryo','MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    width: 100%;
    }

SyntaxHighlighter 3.0の新機能として、必要なBrushファイルを動的に読み込む「Dynamic Brush Loading」機能があるのですが、「サブタイトル」部分にスクリプト指定を書き込む方法ではうまく動作しませんでした。Dynamic Brush Loadingが動作するときめ細かな書式指定が可能になるので試行錯誤中です。ちなみに、DelphiやErlang用のBrushファイルがあるのに、最近プログラマー人口が急上昇しているであろうObjective-C用のBrushファイルは存在しません。C++用を使えということかな。