俺式 INDEX -> NOTE -> HTMLでのソースの公開方法

HTMLでのソースの公開方法

2008-05-28

ソース公開に使うべきタグ

この記事はふと思い立って10分くらいネットで調べて書いた程度のものなので、もしかしたら間違いがあるかもしれない。その場合は誰かが僕に優しく教えてくれればいいと思う。

さて、XML のソースとか C++ のソースとかを HTML で公開するとなると、ちょっと面倒くさい。タグとかはエスケープしなければならない。基本的に使われるのは <pre> タグだ。これはタグ内の半角、タブ文字、改行をそのまま出力してくれるってやつだけど、ほとんどのブラウザでは pre の中でも「<」と「>」をエスケープしなきゃならない。 まあこれは仕方がない。

あとソースをそのまま表示するタグには、<xmp>ってのもあるけど、これは古い仕様らしくて HTML4.0 では廃止されていて、使うのは好ましくない。 web標準的にはソースコードは<pre><code>～</code></pre> で囲むのがいいらしい。

CSS だと、同じようなプロパティに「white-space」ってのがある。 white-space:pre って感じで指定すると、<pre>タグっぽい挙動になる。ただ、これだと横幅が広いときに横スクロールバーが出ちゃったりしてよろしくない。俺式のように CSS で擬似フレームなんかやってたりすると、横スクロールバーも表示されないから、横幅広いやつは見れなくなってしまう。

white-space:pre に加えて overflow:auto を組み合わせれば、ボックス内にスクロールバーが表示されて、IE、Firefox、Opera では当面、問題なく表示される。とりあえず僕は以下のような感じで書くことにした。

CSS

pre.listBox{
	font-family: "ＭＳ ゴシック", monospace;
	text-align: left;
	white-space: pre;
	overflow: auto;
}

HTML

<pre class="listBox">
#include <stdio.h>
int main( void ){
	printf( "honyapeke" );
	return   0;
}
</pre>

半角スペースよりもタブ

HTML を見て、そのままエディタなんかにコピー＆ペーストすることを考えると、タブ文字などが見た目通りエディタ側に反映されることが望ましい。一般的にソースコードを書くときのインデントはタブでつけるだろうから、 HTML 側でも半角スペースではなくタブでインデントをつけておくべきである。

<pre> タグを使う場合、大抵のブラウザではタブ文字は半角８文字分になるようだ。僕は普段、タブのサイズを半角４文字分にしてプログラムを書いているので、８文字というのはいささか深くて、見ていて落ち着かない。しかし、前述したようにコピペすることを考えると、見栄えが悪くともタブでインデントしておいた方がいいと思う。

半角インデントはまだ許せるが、全角スペースでインデントしてあるときなどは愕然とする。コピー＆ペーストしたときに全角スペースが紛れ込んで、コンパイルエラーになったりなんかすると、これを書いた人は本当にプログラミングをたしなむ人間なのかと疑いたくなる。

JavaScript を用いる方法

HTML + CSS だと上記のようなところが関の山だが、スクリプトによる構文強調のプログラムを用いればもっと楽に、なおかつ綺麗にコードを表示できる。ポピュラーなものとしては、JavaScript で書かれた Syntax Highlighter というものがある。これを使うと、例えばC言語なら

#include <stdio.h>
int main( void ){
	printf( "honyapeke" );
	return   0;
}

// コメント文
/* コメント文 */

hogehoge //通常のコード
#include "uso800.h"        //プリプロセッサ
int char long double float //データ型
if while switch for class  //キーワード
"This is test string"      //文字列

このように手軽に色つきで表示できる。使い方は、ダウンロードしたスクリプトと CSS を適当な場所に置いて、HTML のヘッダで

<link rel="stylesheet" type="text/css" href="Styles/SyntaxHighlighter.css"/>
<script type="text/javascript" src="Scripts/shCore.js" charset="Shift_JIS"></script>


<script type="text/javascript" src="Scripts/shBrushCpp.js"></script>

のようにリンクしておき、表示したいコードを

<pre name="code" class="c">
  コード
</pre>

という形で pre タグで囲めばよい。class にはコードの種類に対応したキーワードを記述する。なお、実際に使う際はスクリプトを呼び出す記述が必要だが、これは予め shCore.js の末尾に

window.onload = function () {     
    dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';     
    dp.SyntaxHighlighter.HighlightAll('code');     
}

を記述しておけばよい。構文強調の色は、基本的には Styles/SyntaxHighlighter.css を書き換えることによって調整できる。ウインドウの大きさを変えたり、文字サイズのピクセル指定をパーセント指定に変えたりするのもここからできる。

言語ごとの特殊な構文（C言語のデータ型など）の CSS は Scripts フォルダの中の shBrush***.js ファイルにスクリプトの形で記述されているので、そこをいじればよい。