JavaScriptでコードブロックに言語ラベルを自動で抽出して表示する方法

<p>導入方法はとても簡単です。</p>|
<p>あなたのプロジェクトのheaderかfooterに以下のscriptタグを追加するだけです。</p>
<div class="code-block">
    <pre class="line-numbers" data-copy="true">
        <code class="language-html">&lt;scriptsrc="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"&gt;&lt;/script&gt;
        </code>
    </pre>
</div>

<pre>
    <code>
        x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
    </code>
</pre>

<div class="code-block">
    <pre>
        <code>
            x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
        </code>
    </pre>
</div>

<div class="code-block">
    <pre>
        <code class="language-text">
            x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
        </code>
    </pre>
</div>

document.querySelectorAll('.code-block').forEach(block => {
  const codeElement = block.querySelector('code');
  // 言語抽出
  const languageClass = codeElement.className.split(' ').find(className => className.startsWith('language-'));
  const language = languageClass.replace('language-', '');
  
  const label = document.createElement('div');
  label.className = 'language-label';
  label.textContent = language.charAt(0).toUpperCase() + language.slice(1);
  block.insertBefore(label, block.firstChild);
})

// .code-blockを取得してforEachで1つずつ処理する
document.querySelectorAll('.code-block').forEach(block => {

  // 各code-block内の<code>要素を取得
  const codeElement = block.querySelector('code');

  // 前半：code.className.split(' ')でクラス名を配列に分割する
  // 後半: findを使って language- で始まるクラス名を見つける
  const languageClass = codeElement.className.split(' ').find(className => className.startsWith('language-'));

  // 言語名を抽出
  const language = languageClass.replace('language-', '');

  // ...
  // 後半へ続く
  // ...
})

// .code-blockを取得してforEachで1つずつ処理する
document.querySelectorAll('.code-block').forEach(block => {
  // ...
  // 前半の続き
  // ...

  // divタグを動的に生成する
  const label = document.createElement('div');
  
  // divタグの各要素を設定する
  // class名は language-label
  label.className = 'language-label';
  
  // 文字列は先頭1文字のみ大文字にする
  label.textContent = language.charAt(0).toUpperCase() + language.slice(1);
  
  // code-blockの先頭にこのdiv要素を挿入する
  block.insertBefore(label, block.firstChild);
})