ソースコード表示機能のテスト

最近、ソースコードがきれいに掲載されているサイトが多いです。それらに刺激されて、どうやったらきれいになるのか、試してみます。

ソースコードを整形するツール（と言うかJavaScriptとCSS）を見つけようとしても、数が多すぎてよく分からないのが実態です。そんな中、SyntaxHighlighterに辿り着きました。（URL）

まずは、私のよく使う（または使うであろう）言語・フォーマット達が含まれているかチェックです。割と沢山対応していて、Ruby, VisualBasic, JavaScript, C#, Java, PlainText, HTML, CSSなどたいがいのものはオッケーです。GoogleのGoogle-Code-Prettifyというツールもあるのですが、Rubyのサポートがないのと、表示がイマイチなので使いません。

使い方も、headタグでJavaScriptを読み込んで、表示したい箇所でちょっとだけJavaScriptを書くだけです。嬉しいことに、作者のWebページでホスティング（って言葉で正しいのかな？）してくれてます。

まずはheadタグの中に以下の内容を書きます。


その後、ソースコードを埋め込みたい箇所に以下のように書きます。


別の書き方はこちら

<pre class="brush: html">
ソースコード
</pre>

いずれも、brush: htmlの箇所を書き換えると様々な言語に対応できます。ただし！HTMLのタグが入っていると、（少なくともBloggerでは）エラーになってしまうので、この際ですから>や<に書き換えてしまいましょう。これらの対応を施しても、ソースコードの右上付近に出てくるコピーツールでコピーすると、きちんとした括弧に直してくれます。

その変換は、クリボウさんのこちらの記事をご覧ください。このような便利なツールを公開していただき、ありがとうございます。 ツイート