コードハイライト

ソースコードをきれいに表示しようとdp.SyntaxHighlighterを使ってみることにしました。

あなたのソースコードを彩る、Syntax Highlighterまとめ
http://blog.37to.net/2007/06/syntax_highlighter/

を参考にさせてもらいました。

元のソースを極力いじらず、後で再編集もできるものがいいと思ったので、表示したいソースを変換してブログに書き込むものではなく、JavaScriptで表示時に変換するタイプを選びました。

google-code-prettifyもいいなと思ったんですけど、コードハイライトだけじゃなくて行番号も表示したかったのです。

あとはWordPressを使ってみようかなあとほのかに思っているので、iG:Syntax Hiliterというプラグインも気になりました。

●使い方

使い方は難しくなくて、手順は2つ。

・表示したいソースコードを<pre>タグ(か<textarea>タグ)で囲む。
・関連するJavaScript/CSS/SWFファイルを読み込むタグを書く。

ソースコードはほぼそのままでOKなんですが、<だけは実態参照で&lt;と記述する必要があります。&、”、>はそのままでも大丈夫っぽい。

たとえば、

<pre name="code" class="php">
&lt;?php
if (true) {
echo "Test";
}
</pre>

と記載すると、

<?php
if (true) {
echo "Test";
}

という表示になります。

行番号の開始数を変更すること(firstline[value])もできますし、行番号やメニュー部分を非表示にしたり(nogutterとnocontrols)、ソースコードのブロックを折りたたんで表示したり(collapse)、いくつかオプションも設定できます。

不満というか、意外だったのは対応言語にperlがないことくらいかな。Cとかに設定しておけば、まあいいでしょうか。

面倒なのが一点。ブログをectoというツールで書いていて、普段はRich Text Editorというので書いています。HTMLと切り替えてると余計なタグが消えたり、書き換わったりしちゃうんですよね。

ecto側の設定でなんとかなるのか調べてもいませんが。ある程度書いておいてから、ソースコード部分だけは最後に反映させるということで我慢しようかと思います。

dp.SyntaxHighlighter.ClipboardSwf = ‘/blog/syntaxhighlighter/clipboard.swf’;
dp.SyntaxHighlighter.HighlightAll(‘code’);


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>