はてなブログで記事にソースコードを埋め込む方法【行番号表示あり】 - （旧）コダフォンの日記ブログ（移転しました）

f:id:codafon-prog:20211020220815j:plain:w200

はてなブログで記事にソースコードを埋め込む方法【行番号表示あり】

結論

デザイン画面に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 に下記コードを追加します。

（うまくいかない場合、追加場所を上部にすると正常に動いたりする。優先順位の影響かしらんけど。）

/*コード色*/
.entry-content pre.code {
    background-color: #1E1E1E;
    color: #ffffff;
}
.synComment { color: #6272a4; }
.synConstant { color: #f1fa8c; }
.synIdentifier { color: #bd93f9; }
.synPreProc { color: #a199c8; }
.synSpecial { color: #c000c0; }
.synStatement { color: #50fa7b; }
.synType { color: #ff79c6; }

/* -----code行番号表示----- */
.code-line {
  counter-increment: linenumber; /*code-lineクラスの数でカウント*/
}
.code-line:nth-child(even){
  background-color: #1E1E1E; /*偶数行のみ背景色を適用*/
}
.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;
}