2024/11/08

　昨日コードが含まれたブログを書いた(https://15km.jp/15KB/posts/2024-11-07)のだけれど、そうしたらBluditはデフォルトでハイライトがついていなくて、Pluginもよいのがなかったため、自分で書く羽目になった。

　とりあえずBeforeAfterを貼る。（スクショ失敗したけれど資料はこれしかない）背景色が全く同じなので見づらい。

　こちらがBefore、

　こちらがAfter、

　仕様を理解するのに時間がかかってしまった。特に、Shikiのドキュメントがざっくばらんすぎて、まだ理解できていない。本当はコメントは斜体じゃない方がいいのだけれど。

　コードはhttps://15km.jp/scripts/bludit-plugins/code-highlight-shiki/releases/code-highlight-shiki_v1.0.zip。

　ついでにここにも乗せておくと、

<?php
class pluginCodeHighlightShiki extends Plugin {
  public function siteBodyEnd() {
    $theme = 'one-dark-pro';
    $javascript_code = <<<JS
    <script type="module">
      import { codeToHtml } from 'https://esm.sh/shiki@1.22.2';

      document.addEventListener("DOMContentLoaded", async () => {
        // <code>タグ内のコードをハイライト
        document.querySelectorAll('pre code').forEach(async (codeElement) => {
          const codeText = codeElement.textContent;

          // class属性から言語とファイル名を取得
          const classList = codeElement.classList;
          const languageClass = classList.value.match(/language-([^:]+)/);
          const lang = languageClass ? languageClass[1] : 'text';

          const highlightedCode = await codeToHtml(codeText, { 
            lang,
            theme: '$theme'
          });

          // <code>タグの内容をハイライト済みのHTMLに置き換え
          const preElement = codeElement.parentNode;
          preElement.outerHTML = highlightedCode;
        });
      });
    </script>
    JS;

    echo $javascript_code;
  }
}

　分かってしまえばなんてことのないコード。JSの部分がうまく表示できていないのはしようが無いとして、コメントは斜体にしたくないのと、ファイル名も表示できるようにしたいね。あと、色も変えたい。そのうち…