$(function(){
    // ruler用のcanvas要素をbody要素内に追加
    $('body').append('<canvas id="ruler"></span>');
    // 各コードブロックで関数を実行
    $('pre code').each(function(){
        // コードブロック内のコードに対して改行コードを検知して各行を配列に格納
        var codeStrings = $(this).text().split(/\r\n|\r|\n/);
        // コードブロック内の行数を取得
        var lines = codeStrings.length - 1;
        // 行数を表示させるためのul要素を作成
        var $numbering = $('<ul/>').addClass('pre-numbering');
        // コードブロックの描画幅を取得
        var elWidth = $(this).width();
        // コード内のフォントを取得
        var textFont = $('pre code').css('font');
        // 行数表示用の要素を親要素の下に追加
        $(this)
            .parent()
            .append($numbering);
        var i,j,wraps;
        // コードの各行に関するループ
        for(i=0;i<lines;i++){
            // 文字列の描画幅を取得して画面を何度折り返すかを調べる
            wraps = Math.floor(strWidth(codeStrings[i])/elWidth);
            // 行数をli要素の中に入れる
            $numbering.append($('<li/>').text(i+1));
            // 折り返しがある場合は折り返しの数だけ空のli要素を追加
            if(wraps>0){
                for (j=0;j<wraps;j++){
                    $numbering.append('<li> </li>');
                }
            }
        }
        // canvasを使った文字列の描画幅を取得する関数
        function strWidth(str) {
            var canvas = document.getElementById('ruler');
            if (canvas.getContext) {
                var context = canvas.getContext('2d');
                context.font = textFont;
                var metrics = context.measureText(str);
                return metrics.width;
            }
            return -1;
        }
    });
});