【はてなブログ】コード部分に行番号を表示するカスタマイズ

【はてなブログ】スーパーpre記法でコードを表示するときに行番号を表示するカスタマイズ

はてなブログで、スーパーpre記法でコードを表示するときに、左側に行番号を表示させるカスタマイズ方法のメモです。

あと、左上にコード種類名も表示させます。

はてなブログで、コードを表示するときに行番号とコード種類名を表示させるカスタマイズです

本記事では、以下を解説します。

はてなブログのコード部分に行番号を表示させる方法
はてなブログのコード部分を1行ごとに背景色を変える方法
はてなブログのコード種類名を左上に表示させる方法

【はてなブログ】スーパーpre記法でコードを表示するときに行番号を表示するカスタマイズ
- 具体的な手順
  - JavaScript の追加
  - CSSの追加
- 参考にしたサイト

具体的な手順

JavaScript の追加

デザイン　＞　カスタマイズ　＞　フッタ

に下記コードを追加します。

/* -----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の追加

デザイン　＞　カスタマイズ　＞　デザイン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: -5px;
  padding: 3px;
  background: #cccccc;
  color: #000000;
}