レイアウトの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とかで。$(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>
でもjsなんかの内部に特殊記号を含むコードだと投稿時にエスケープされてないと上手くいかないなぁ・・・。
0 件のコメント:
コメントを投稿