pre三者三様

d:id:imait:20090207:1233991059では、はてなのpreがすごいといってました。どんな風にすごいか、ちょっと試してみました。例はJavaScriptのコードで、自作のツールの使い方を説明するために用意したもの。それを一部コピーしました。

その説明の文書はHTMLで書かれていたのですが、そこではこんな風にマークアップされていました：

function tableManager() {
    var <var>ctt</var> = new ClassTimeTable;
    
    var <var>targetDivision</var> = document.getElementById(<var>ctt</var>.getElementsid());
    var <var>elementTable</var> = <var>ctt</var>.createClasstimetable();
    var <var>oldTable</var> = document.getElementById('TBL_' + <var>ctt</var>.getElementsid());
    if (<var>oldTable</var>) {
        if (<var>oldTable</var> != <var>elementTable</var>) {
            <var>targetDivision</var>.replaceChild(<var>elementTable</var>, <var>oldTable</var>);
        }
    } else {
        <var>targetDivision</var>.appendChild(<var>elementTable</var>);
    }

    var <var>waitTime</var> = 0;
    var <var>date</var> = new Date();
    var <var>waitTemp</var> = 15 - ((<var>date</var>.getMinutes() % 15) + 1);
    <var>waitTime</var> += (<var>waitTemp</var>) * 60 * 1000;
    <var>waitTemp</var> = 60 - (<var>date</var>.getSeconds() + 1);
    <var>waitTime</var> += (<var>waitTemp</var>) * 1000;
    <var>waitTime</var> += 1002 - <var>date</var>.getMilliseconds();
    setTimeout('tableManager()', <var>waitTime</var>);
}

ブラウザではこう見えます：

function tableManager() {
    var ctt = new ClassTimeTable;
    
    var targetDivision = document.getElementById(ctt.getElementsid());
    var elementTable = ctt.createClasstimetable();
    var oldTable = document.getElementById('TBL_' + ctt.getElementsid());
    if (oldTable) {
        if (oldTable != elementTable) {
            targetDivision.replaceChild(elementTable, oldTable);
        }
    } else {
        targetDivision.appendChild(elementTable);
    }

    var waitTime = 0;
    var date = new Date();
    var waitTemp = 15 - ((date.getMinutes() % 15) + 1);
    waitTime += (waitTemp) * 60 * 1000;
    waitTemp = 60 - (date.getSeconds() + 1);
    waitTime += (waitTemp) * 1000;
    waitTime += 1002 - date.getMilliseconds();
    setTimeout('tableManager()', waitTime);
}

これをスーパーpre記法（シンタックス・ハイライト）でやると、つまりマークアップせず、そのままはてなの機能まかせにしてやるとこうなります：

function tableManager() {
    var ctt = new ClassTimeTable;
    
    var targetDivision = document.getElementById(ctt.getElementsid());
    var elementTable = ctt.createClasstimetable();
    var oldTable = document.getElementById('TBL_' + ctt.getElementsid());
    if (oldTable) {
        if (oldTable != elementTable) {
            targetDivision.replaceChild(elementTable, oldTable);
        }
    } else {
        targetDivision.appendChild(elementTable);
    }

    var waitTime = 0;
    var date = new Date();
    var waitTemp = 15 - ((date.getMinutes() % 15) + 1);
    waitTime += (waitTemp) * 60 * 1000;
    waitTemp = 60 - (date.getSeconds() + 1);
    waitTime += (waitTemp) * 1000;
    waitTime += 1002 - date.getMilliseconds();
    setTimeout('tableManager()', waitTime);
}

すごい楽！　そして読みやすい。これはいいなあ。すごくいい機能だと思います。