「コード」ブロックに独自に行番号を追加する方法

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // 処理対象とするコードブロック要素のセレクタ定数を定義
  const TARGET_SELECTOR = '.wp-block-code code';

  $(TARGET_SELECTOR).each(function () {
    // codeタグ内のHTMLコンテンツを取得し、改行文字で分割して各行の配列を生成
    var tmp = $(this).html();
    var lines = tmp.split('\n');
    var txt = '';

    // 分割された行の数だけループ処理を回す
    for (var i = 1; i <= lines.length; i++) {
      // 行番号用のspanタグと元の行テキストを連結
      txt += '<span class="code-highlight__line"></span>' + lines[i - 1];

      // 最終行以外の場合は改行コードを付与
      if (i !== lines.length) {
        txt += '\n';
      }
    }

    $(this).html(txt);
  });
});

以下のコードをstyle.cssに追加します。

.wp-block-code {
  counter-reset: line calc(var(--start-line, 1) - 1);
  position: relative;

  .code-highlight__line::before {
    color: #777;
    content: counter(line);
    counter-increment: line;
    left: 0;
    margin-left: 10px;
    position: absolute;
    text-align: right;
    width: 2em;
  }
}

body:not(.editor-styles-wrapper) .wp-block-code {
  padding-left: 3em;
}