はてなブログ ソースコードの表示について その２

昨日から四苦八苦して漸くソースコードをブログ記事中に張り付ける方法が確立したような気がします。とりあえずこの程度で調査を打ち切ろうかなと思っています。
【こういう現象がでても気にしないでください！】
ブログ表示においてノベタンで表示する場合はちゃんとJavaScriptが効いているのにブログを１ページずつ表示する方式では効いてないみたいです。
原因がよくわからない。最終的にはHTMLのコードで書いてやらないと「はてな風記法」ではうまくいかないケースがあるのかもしれません・・・
【理由は編集直後のJavaScriptの実行が追い付かないケースがあるみたいです】
二転三転して申し訳ないがどうも更新直後に表示させるとだめみたいだ！

１．フッターに張り付けた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>
<script defer>
;(function(d){

if(!window.getSelection){
  return
}

var btn = d.createElement("button")
btn.id = "selectPre"
btn.textContent = "select"
btn.addEventListener("click", selectPre, false)

function selectPre(){
  var sel = window.getSelection()
  var pre = this.parentNode
  sel.selectAllChildren(pre)
  sel.extend(pre, pre.childNodes.length-1)
}


var pres = d.getElementsByTagName("pre")
for(var i=pres.length; i--;){
  pres[i].addEventListener("mouseover", addBtn, false)
}

function addBtn(e){
  if(this === addBtn.ele) return // not to addBtn if already
  this.appendChild(btn)
  return addBtn.ele = this
}

})(document)
</script>
<script type="text/javascript">
window.addEventListener("load", function onLoad() {
  window.removeEventListener("load", onLoad);
  var codes = document.querySelectorAll("pre.code");
  var len = codes.length;
  for (var i = 0; i < len; i++) {
    (function () {
      var code = codes[i];
      // select all on double click
      code.addEventListener("dblclick", function () {
        var range = document.createRange();
        range.selectNodeContents(code);
        var selection = document.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
      });
    })();
  }
});
</script>

２．CSSに張り付けたソースコード

/* <system section="theme" selected="6653586347155924442"> */
@import url("https://blog.hatena.ne.jp/-/theme/6653586347155924442.css");
/* </system> */

/*code-listクラスの数でカウント*/
.code-list:nth-child(2n+1) {
    background-color: #eee;
}
#selectPre{
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  padding: 2px 3px;
  font-family: consolas
}
/*code-lineクラスの数でカウント*/
.code-line {
  counter-increment: linenumber;
}
/*偶数行のみ背景色を適用*/
.code-line:nth-child(even){
  background-color: #eee;
}
/*行番号を擬似要素として表示*/
.code-line::before {
  content: counter(linenumber);
  display:inline-block;
  color: #ccc;
  text-align: right;
  width: 35px;
  padding: 0 15px 0 0;
}
/*コードブロックに言語名を表示*/
pre.code:before {
    content: attr(data-lang);
    display: inline-block;
    background: #ccc; /*カラーコード変更*/
    color: #666;
    padding: 5px;
    position: absolute;
    margin-left: -20px; /*表示位置を調整*/
    margin-top: -30px;
}
pre.code {
    padding-top: 30px !important;
    border:2px solid #ccc; /*追加：コード表示部分の枠設定*/
    background:#f8f8f8; /*追加：コード表示部分の背景色*/
    position:relative; /*追加*/
}
*グローバルメニュー*/
 #global-menu {
 background-color: #444444; /*ナビメニューの両サイド背景の色変更*/
 border-bottom: 2px solid #444444;　/*ナビメニュー下部のラインカラー変更*/
 }
 .global-menu-list li a {
 color: #fff; /*ナビメニューの文字色変更*/
 background-color: #444444; /*ナビメニューの背景色変更*/
 }
 #mobile-head {
 background-color: #444444; /*スマホ版 ナビメニューの背景色変更*/
 }
 #blog-title {
  border-bottom: 1px solid #444444;　/*ナビメニュー上部のラインカラー変更*/
 }

３．ヘッダーに貼り付けたソースコード

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="global-menu">
<ul class="global-menu-list">
<li><a href="https://www.notitle-weblog.com/entry/2016/02/04/171538" target="_blank">Webデザイン</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
</ul>
</div>