コードブロックで言語名を表示する機能

[munierujp]

Qiitaでは、コードブロックで言語名を指定してシンタックスハイライトを効かせることができますが、特定の言語を主題としていない記事の中で唐突にコードブロックが出てきたとき、言語が何で書かれているのかぱっと見では分からないので、言語名を表示する機能がほしいです。 ※「あったらいいなあ」レベルの要望です。

現状

• 言語名は.code-frameのdata-lang属性に入っている
• ファイル名の指定がある場合は.code-frame下に.code-langという要素があり、ファイル名のみが記載されている

動作イメージ

コード例

以下はコンソールで実行可能なコードです。

(function () {
  const LANG_CLASS_NAME = 'code-lang'

  [...document.getElementsByClassName('code-frame')].forEach(frame => {
    const langElement = frame.querySelector(`.${LANG_CLASS_NAME}`)
    const lang = frame.dataset.lang
    if (langElement) {
      const label = langElement.querySelector('span')
      label.textContent = `${lang}:${label.textContent}`
    } else {
      const newLangElement = document.createElement('div')
      newLangElement.className = LANG_CLASS_NAME
      newLangElement.innerHTML = `<span class="bold">${lang}</span>`
      frame.insertBefore(newLangElement, frame.firstElementChild)
    }
  })
})()