【jQuery】はてなブログでソースコードをタブBOX表示するテスト

f:id:catprogram:20140818015242j:plain
はてなで各種ソースコードを表示しようとした時、
普通にSyntaxHighlighterを使ってもいいんだけどね。
なーんかブログと見た目が合わないというか・・・
オリジナリティが無いというか・・・

そんなこんなで試作品を作ってみました。
まだ色や形は味気ないです（今はCSSまでやる気力なし）
BOX全体の色味をブログに合わせたり、一行置きにバックグラウンドの色を変えたり。
その上でプラグインっぽくスクリプトを外部呼び出しにすると完璧ですね（課題）

☆注意　完全にはてな用ってことで他の用途には使えません。
（弄れば使えるかなｗ）

あとChromeでしか表示確認してないっす（おぃおぃ
もちっと時間ができたらプラグイン化するので待っててにゃ☆

とにかくタブをポチポチして遊んでみてくださいｗ

$(function() {
  $('.src_box').each(function(){
    var tab = $('<ul>').attr('class',"src_tab");
    var content = $('<ul>').attr('class',"src_content");
    $('pre',this).each(function(){
      tab.append($('<li>').html($(this).attr('data-lang')));
      var pre = $('<li>').append($(this).clone());
      content.append(pre);
    });
    $(this).html('');
    tab.children().first().attr('class','select');
    content.children().first().css('display','block');
    $(this).append(tab).append(content);
  });

  $('.src_tab li').click(function() {
    var parent = $(this).parent().parent();
    var index = $('.src_tab li').index(this);
    $('.src_content li',parent).css('display','none');
    $('.src_content li').eq(index).css('display','block');
    $('.src_tab li',parent).removeClass('select');
    $(this).addClass('select')
  });
});

.src_box{
  margin:20px 0;
  border:none;
　box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}  
.src_tab{
  overflow:hidden;
}
ul.src_tab{
  list-style:none;
  margin:0;
  margin-left:-40px;

} 
.src_tab li{
  background:#eee;
  padding:5px 25px;
  float:left;
  margin-right:1px;
  -webkit-border-top-left-radius: 10px;  
  -webkit-border-top-right-radius: 20px;  
  -moz-border-radius-topleft: 10px;  
  -moz-border-radius-topright: 20px;  
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.src_tab li.select{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2) inset;
}

ul.src_content{
 width:550px;
 height:300px;
 list-style:none;
 margin:0;
 margin-left:-40px;
 overflow:auto;
} 
.src_content li{
 display:none;
 background:#eee;
 padding:0px;
 margin:0;
}
.src_box pre{
  margin:0;
  padding:20px;
　
}
.hide {display:none;}

src_boxクラスを設定したdivでソースコード群を囲む。
その中に、はてな記法（スーパーpre記法）でソースコードを書く。
＞｜言語｜の言語名は必ず設定！　これがタブになります。
以下、サンプル。
はてなが反応しちゃうｗので記号は全角にしています。実際は半角です。

<div class="src_box">
＞｜javascript｜
　ソース
｜｜＜

＞｜css｜
　ソース
｜｜＜

＞｜html｜
　ソース
｜｜＜
</div>

上から順番にタブが作られて行きます。
はてな記法で使える言語なら対応可能。

うぁぁぁぁ～！！これ欲しいよぉぉぉぉ↓↓↓

箱の中身は付いてるの？付いてるの？