【はてなブログ】プログラムソースコードに行番号を表示

前回はプログラムコードを記載する方法を掲載しました。
【はてなブログ】プログラムソースコード記載方法 - 学習部屋

今回ははてな記法で掲載したプログラムコードに行番号を表示させる方法を記載していこうと思います。
まず、はてなブログのサイトへ行き自身のユーザー名をクリック→リストの中からデザインを選択→画面左のカスタマイズを選択→下の方にフッタとデザインCSSの項目が有るのでその二つをいじっていきます。

まずはフッタを選択して中に下記のコードを記入します。特にコードの意味が分からなくてもコピーあんどペーストでも構いません。

/* -----codeの行番号----- */
<script>
var codeBlocks = document.getElementsByClassName('code');
[].forEach.call(codeBlocks, function(e) {
  if (!/lang/.test(e.className)) {
      return;
  }
  var lines = e.innerHTML.split(/\n/);
  var codeBlock = "";
  lines.forEach(function(line){
    if(line != ""){
      codeBlock += '<div class="code-line">' + line + '</div>'      
    }
  })
  e.innerHTML = codeBlock;
});
</script>

こんな感じです。

次にデザインCSSを変更します

/* -----code行番号表示----- */
.code-line {
  counter-increment: linenumber; /*code-lineクラスの数でカウント*/
}
.code-line:nth-child(even){
  background-color: #333333; /*偶数行のみ背景色を適用*/
}
.code-line::before {
  content: counter(linenumber); /*行番号を擬似要素として表示*/
  display:inline-block;
  color: #ccc;
  text-align: left;
  width: 30px;
  padding: 0 5px 0 0;
}
/* -----codeコード種類名の表示----- */
.entry-content pre.code{
  padding: 30px 0 0 5px;
}
.entry-content pre.code:before{
  content: attr(data-lang);
  dsplay: inline-block;
  position: absolute;
  margin-top: -30px;
  margin-left: 0px;
  padding: 3px;
  background: #cccccc;
  color: #000000;
}

これで設定は完了です。

中の設定を自分で色々と変更してみれば変化が楽しめると思います。

参考にさせて頂いたサイト

souiunogaii.hatenablog.com