ラベル

2012年11月13日火曜日

Bloggerでとりあえずソースコード表示

なんか外部サイトにjsとかCSS置いて参照しろっていうのがめんどくさすぎたので自力でやれないか模索した。



レイアウトのHTML編集でjQueryを読み込むように設定して以下のコードをHTML/JavaScriptガジェットにしてページに置いた。
jQueryって本当に楽でいいよね。
<script type="text/javascript">
$(function(){
    $('.code').each(function(){
        var tx = $(this).text().trim();
        var $base = $('<ol/>');
        var $item = $('<li/>').css({marginBottom: '0'});
        $.each(tx.split('\n'),function(){
            $base.append( $item.clone().text(this.toString()) );
        });
        $base.find('li:even').css({backgroundColor : '#222'});
        $(this).css({lineHeight: '1.1', backgroundColor : '#171717'})
             .empty().append($base);
    });
});
</script>

コード部分をcodeクラス付けたブロック要素で囲めばOKになる。preとかdivとかで。
でもjsなんかの内部に特殊記号を含むコードだと投稿時にエスケープされてないと上手くいかないなぁ・・・。

0 件のコメント: