はてなブログ プログラムコードに行番号を付ける

2020 Mar. 21.

参照元　http://am1tanaka.hatenablog.com/entry/2017/04/07/233211

1. ブログ全体でプログラムコードに行番号を付ける設定する

はてなブログの管理画面->デザイン->カスタマイズ（アイコンをクリック）
フッタ欄に次のjavaScriptコードを記述する。

<script>
let codes = document.getElementsByClassName('code');
[].forEach.call(codes, function(elem, key, val){
    // クラスに lang が含まれていない場合は何もしない
    if (!/lang/.test(elem.className)) {
        return;
    }
    let line_num = 1;
    // 行で分割
    let lines = elem.innerHTML.split("\n");
    let texts = elem.textContent.split("\n");
    // 最終行が空の時は削除
    if (lines[lines.length-1].length === 0) {
        lines.pop();
    }
    // 最初の1行目にコメント後の数字:か、数字:があれば、先頭の行番号にする(2017/4/15修正)
    if ((texts.length > 0) && (/(^|\/\/|\/\*) *[0-9]+:/.test(texts[0].trim()))) {
        line_num = texts[0].trim().replace(/:/, "").replace(/(\/\/|\/\*)/, "")-0;
        lines.shift();
    }
    let modi = "<ol start='"+line_num+"'>";
    lines.forEach(function(elem) {
        modi += "<li class='code-list'>"+elem+"</li>";
    });
    modi += "</ol>";
    elem.innerHTML = modi;
});
</script>

2. ブログ全体でプログラムコードの奇数行の背景色を設定する

次のコードをデザインCSS欄の既存コードの末尾に追記する。

.code-list:nth-child(2n+1) {
    background-color: #eee;
}

3. 個別記事中のコードを はてな記法（ >|xxx| コード ||< ）で記述する