ソースコード貼ったら綺麗に見えなかったので素直にSyntaxHighlighter導入してみたという話。
当初MT用のプラグインであるSyntaxHighlighter for Movable Typeを入れるつもりだったがもう更新されてないようだったので最新版を自力で組み込んだ。
参考にしたサイト- 上記SyntaxHighlighter公式のInstallationとConfiguration
- 凡人プログラマーの独り言 - SyntaxHighlighter 3.0を使いこなす
- ほんっとにはじめてのHTML5 - (ちょっとメモ)SyntaxHighlighter 3.0.83 の使い方
以下導入手順
- 公式サイトから最新版をダウンロード
- 解凍してscriptsフォルダとstylesフォルダをWebサーバ上の適当な場所に設置。ウチではWebルート直下に置いた。
※ちなみに使わないjsファイルとcssファイルは削除していい模様。私は面倒なのでそのまま置いた - テンプレートモジュール -> HTMLヘッダーを開いて以下を追記
- cssはとりあえずデフォルトで。
(他のテーマにする場合でもshCoreHogehogeというファイルを一つ読み込めばいい模様) - jsファイルも自分が使う予定の言語分だけロードする。
(多めにロードしてるので無駄かも) - bloggerModeとstripBrs公式のconfig参考につけてみた。今のところ期待した効果出てないのでいらない?
- cssはとりあえずデフォルトで。
導入は以上。
あとは記事にソース貼る際に以下のどちらかで指定する。例ではperlを指定。
preタグの場合、ソースコード中の < > はHTMLエスケープする必要あり。
<script class="brush:perl;toolbar:false;" type="syntaxhighlighter" title="sample.pl"><![CDATA[ ///ソースコード記述 ]]></script>
上記例ではツールバー(SyntaxHighlighterのバージョン表示)をオフにしてタイトルを表示。他のオプションは公式サイト等を参考に。 ついでに冒頭記述のサイトを参考にしてCSSもちょこっといじった。
以下残件とか困ったこと- 記事投稿時「改行を変換」にした場合、空行入れるとPタグが入りこんでしまう(試してないけど他のフォーマットでもダメなはず)
->未解決。SyntaxHighlighter使うところで空行を入れないかフォーマットなしにしてその他の部分の改行制御を自力でやるか...というかMT側の入力支援との相性が悪い... - オートローダー使ってない
->どのテンプレートに書くか迷った(ヘッダにかけない)のでいったん放置した。こっち使った方がはやくなるみたいなのでそのうち検討したい