はてなブログのソースコードに行数を表示

プログラムは以下の通り。

<script>
//コードからclass属性が'code'であるタグ要素をコードと同期性のある配列として取得。
let codes = document.getElementsByClassName('code');

//配列に含まれているタグ要素（タグとテキスト）を一つずつ取得。
[].forEach.call(codes, function(elem){

    //取得したタグ要素のclass属性に'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();
    }
    

    //タグ要素内のタグ要素を行ごとにolタグで囲んだソースを作成。
    let modi = "<ol start='"+line_num+"'>";
    lines.forEach(function(elem) {
        modi += "<li class='code-list'>"+elem+"</li>";
    });
    modi += "</ol>";
    
    //配列に含まれているタグ要素を改変したタグ要素に変更。
    //同期性により、コード内も瞬間同期（コードが書き換わる）。
    elem.innerHTML = modi;
});
</script>

正直、参考にしたページを丸パクリして自分なりにコメント付けただけです。
以下プログラムに使った関数の解説。

document.getElementsByClassName(‘class属性’)；documentに格納されているHTML要素から、特定のclass属性を含むタグ要素を、配列のようなオブジェクト（HTMLCollection）として取得。HTMLCollectionには同期性があるので、中身を変えるとソースコードも変更される。参考にしたのはこことここ

”HTMLCollection”.innerHTML；タグ要素内の（特定タグに囲まれた）タグ要素を取得。

”HTMLCollection”.textContent；タグ要素内のテキストのみを取得。タグで囲まれたテキストはタグを取り除いて改行された状態で保存される。

タグ要素内のタグ要素とテキストの違いが分かりにくいと思ったので、以下の様なソースコードを書いてみる。

<html>
  <body>
    <ol class='test'>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ol>

    <script>
      let codes = document.getElementsByClassName('test');
      console.log(codes);
      [].forEach.call(codes, function(elem){
        console.log('innerHTML');
        console.log(elem.innerHTML)

        console.log('textContent');
        console.log(elem.textContent)
      });
    </script>
  </body>
</html>