Web Design Leaves

function add_my_hljs_styles_and_scripts() {

  // 管理画面では何もしない
  if (is_admin()) return;

  // Hightlight.js の CSS（atom-one-dark.min.css）の読み込み
  wp_enqueue_style(
    // ハンドル名（任意の名前）
    'atom-one-dark',
    '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css',
    array(),
    NULL
  );

  // Hightlight.js の JavaScript（highlight.min.js）の読み込み
  wp_enqueue_script(
    'highlightJS', // ハンドル名（任意の名前）
    '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js',
    array(),
    NULL,
    true
  );

  // Highlight.js の初期化
  wp_add_inline_script(
    // 上記で登録した JavaScript のハンドル名を指定
    'highlightJS',
    // script タグに出力する JavaScript（Highlight.js の初期化）
    'hljs.highlightAll();'
  );
}
add_action('wp_enqueue_scripts', 'add_my_hljs_styles_and_scripts');

pre.wp-block-code {
  padding: 0;
}

//style.css を head 内に読み込む
function add_my_style_css() {
  wp_enqueue_style('style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'add_my_style_css');

function my_core_code_filter_theme_json_theme($theme_json) {
  $new_data = array(
    'version'  => 2,
    'styles' => array(
      'blocks' => array(
        'core/code'    => array(
          'spacing'    => array(
            'padding'    => array(
              'bottom'  => '0',
              'left' => '0',
              'right'  => '0',
              'top' => '0',
            ),
          ),
        ),
      ),
    ),
  );
  return $theme_json->update_with($new_data);
}
add_filter('wp_theme_json_data_theme', 'my_core_code_filter_theme_json_theme');

function add_my_hljs_styles_and_scripts() {
  if (is_admin()) return;

  // Hightlight.js テーマ CSS（atom-one-dark.min.css）の読み込み
  wp_enqueue_style(
    'atom-one-dark', // ハンドル名（任意の名前）
    get_theme_file_uri( '/highlight-js/atom-one-dark.min.css' ),
    array(),
    filemtime( get_theme_file_path( '/highlight-js/atom-one-dark.min.css' ) )  //更新時キャッシュクリア
  );

  // highlight.min.js の読み込み
  wp_enqueue_script(
    'highlightJS', // ハンドル名（任意の名前）
    get_theme_file_uri( '/highlight-js/highlight.min.js' ),
    array(), // 依存ファイルなし
    filemtime( get_theme_file_path( '/highlight-js/highlight.min.js' ) ),
    true
  );

  // Highlight.js の初期化
  wp_add_inline_script(
    // 上記で登録した JavaScript のハンドル名を指定
    'highlightJS',
    // script タグに出力する JavaScript（Highlight.js の初期化）
    'hljs.highlightAll();'
  );
}
add_action('wp_enqueue_scripts', 'add_my_hljs_styles_and_scripts');

document.addEventListener('DOMContentLoaded', () => {
  mySetupHighlightJS();
});

function mySetupHighlightJS() {
  // ツールバーの自動改行ボタンのラベル
  const lineWrapLabel = "wrap";
  // ツールバーの行番号ボタンのラベル
  const lineNumLabel = "number";
  // コピーボタンのラベルとメッセージ
  const copyBtnLabel = "Copy";
  const copyBtnCompleteLabel = "Copied";
  const copyBtnFailedLabel = "Failed";
  const copyFailedMessage = "Sorry, can not copy with this browser.";

  // デフォルトでコードをハイライト表示するかどうか
  const highlightByDefault = true;
  // デフォルトでハイライト表示する場合に、ハイライトしないコードブロックに指定するクラス名
  const noHighlightClass = "no-highlight";
  // デフォルトでハイライト表示しない場合に、ハイライトするコードブロックに指定するクラス名
  const highlightClass = "highlight";

  // デフォルトで行番号を表示するかどうか
  const showLineNumByDefault = true;
  // 行番号を表示しない場合に指定するクラス名（変更不可）
  const noLineNumClass = "no-line-num";
  // デフォルトで行番号を表示しない場合に、個別に行番号を表示する場合に指定するクラス名
  const showLineNumClass= "show-line-num";
  // 行の開始番号を指定するクラスの接頭辞（start-10：開始行番号を10にする）
  const lineNumStartPrefix = "start-";

  // デフォルトで行を自動折り返しするかどうか
  const lineWrapByDefault = true;

  // デフォルトでツールバーを表示するかどうか
  const showToolbarByDefault = true;
  // 個別にツールバーを表示しない場合に指定するクラス名
  const noToolbarClass = "no-toolbar";
  // 個別にツールバーを表示する場合に指定するクラス名
  const showToolbarClass = "show-toolbar";

  // デフォルトで言語名を表示するかどうか
  const showLangNameByDefault = true;
  // 個別に言語名を表示しない場合に指定するクラス名
  const noLangClass = "show-no-lang";
  // 個別に言語名を表示する場合に指定するクラス名
  const showLangClass = "show-lang";

  // デフォルトでコピーボタンを表示するかどうか
  const showCopyByDefault = true;
  // コピーボタンを表示しない場合に指定するクラス名
  const noCopyClass = "no-copy";
  // 個別にツールバーを表示する場合に指定するクラス名
  const showCopyClass = "show-copy";

  // 行数を指定して表示する場合に指定するクラス名の接頭辞（数値の前の部分）
  const maxLinePrefix = "mxl-";
  // 高さ（px）を指定して表示する場合に指定するクラス名の接頭辞（数値の前の部分）
  const maxHeightePrefix = "mxh-";
  // 行数や高さを指定して表示する場合にコードの下に情報バーを表示するかどうか
  const showScrollFooter = true;
  // 上記を表示する場合に表示するデフォルトのテキスト
  const scrollableText = 'scrollable';
  // 情報バーを表示する場合に行数の情報を表示するかどうか（mxh-* を指定した場合）
  const showLineNumInfo = true;

  // コードブロックのラッパー要素のクラス名（変更不可）
  const wrapperClass = "hljs-wrap";
  // ツールバーの div 要素のクラス名
  const toolbarElemClass = "highlight-toolbar";

  /*  Highlight.js 独自プラグインの定義  */
  hljs.addPlugin({
    "after:highlightElement": ({ el, result, text }) => {
      // pre 要素（親要素）を取得して関数の呼び出しで引数に追加
      const pre = el.parentElement;
      if( pre.tagName === 'PRE') {
        // 行番号を表示
        addLineNumbers(el, result, pre);
        // コピーボタンを表示
        copyCode(text, pre);
        // 言語名を表示
        showLanguage(el, result, pre);
        // 指定された行数または高さで表示
        setMaxLineHeight(el, pre);
      }
    },
  });

  // 行番号を表示する関数
  function addLineNumbers(el, result, pre) {
    el.innerHTML = result.value.replace( /^/gm, '<span class="line-num"></span>');
    // pre 要素に指定されているクラス
    const preClassName = pre.className;
    if (preClassName) {
      // 正規表現パターンを作成（start-数値）
      const startLineClassRegex = new RegExp(
        `${lineNumStartPrefix}(-?\\d+)`
      );
      // 開始行番号を指定するクラスにマッチするかどうか
      const matched = preClassName.match(startLineClassRegex);
      // マッチする場合は、数値部分 matched[1] を取得して開始番号を設定
      if (matched && matched[1]) {
        const startNumber = parseInt(matched[1]);
        if (startNumber || startNumber === 0) {
          pre.style.setProperty('counter-reset', 'lineNumber ' + (startNumber - 1));
        }
      }
    }
    // ★★★ 追加 ★★★
    // ラッパーの要素を取得
    const wrapper = el.closest('.' + wrapperClass);
    // ラッパーの高さを取得
    const wrapperHeight = wrapper.offsetHeight;
    // 枠線用の span 要素を作成
    const borderSpan = document.createElement('span');
    // 枠線用の span 要素にクラスを設定
    borderSpan.classList.add('hljs-border-span');
    // 枠線用の span 要素を code 要素（el）に追加
    el.appendChild(borderSpan);
    // 枠線用の span 要素に position: absolute を設定
    borderSpan.style.setProperty('position', 'absolute');
    // 枠線用の span 要素にラッパーの高さを設定
    borderSpan.style.setProperty('height', wrapperHeight + 'px');
    // code 要素のスタイルを取得
    const elComputedStyle = window.getComputedStyle(el);
    // code 要素の paddingBottom
    const elPaddingBottom = parseFloat(elComputedStyle.paddingBottom);

    // ResizeObserver でラッパーのサイズを監視して枠線用の span 要素の高さを更新
    const myObserver = new ResizeObserver((entries) => {
      if (entries.length > 0 && entries[0]) {
        const entry = entries[0];
        // contentBoxSize が使えればその値を、そうでなければ contentRect の値を使用
        const newHeight = entry.contentBoxSize ? entry.contentBoxSize[0].blockSize : entry.contentRect.height;
        // 枠線用の span 要素にラッパーのサイズ変更後の高さを設定
        borderSpan.style.setProperty('height', newHeight + 'px');
        // pre 要素に max-lines クラスが指定されていれば
        if(pre.classList.contains('max-lines')) {
          // 行番号の最後の span 要素から高さを算出して枠線用の span 要素に設定
          const lineNumSpans = el.getElementsByClassName("line-num");
          if(lineNumSpans[lineNumSpans.length-1]) {
            const lastLineNumTop = lineNumSpans[lineNumSpans.length-1].offsetTop;
            const lastLineNumHeight = lineNumSpans[lineNumSpans.length-1].offsetHeight;
            borderSpan.style.setProperty('height', lastLineNumTop + lastLineNumHeight + elPaddingBottom + 'px');
          }
        }
      }
    });
    myObserver.observe(wrapper);
    // ★★★ ここまで ★★★
  }

  // コードをコピーするボタンを追加する関数
  function copyCode(text, pre) {
    if (showCopyByDefault && !pre.classList.contains(noCopyClass) || pre.classList.contains(showCopyClass)) {
      const copyButton = document.createElement("button");
      copyButton.setAttribute("class", "hljs-copy-btn");
      copyButton.textContent = copyBtnLabel;
      pre.after(copyButton);
      pre.querySelector("code").classList.add("copy-btn-added");
      copyButton.addEventListener("click", () => {
        copyToClipboard(copyButton, text);
      });
    }
    function copyToClipboard(btn, text) {
      if (!navigator.clipboard) {
        alert(copyFailedMessage);
      }
      navigator.clipboard.writeText(text).then(
        () => {
          btn.textContent = copyBtnCompleteLabel;
          resetCopyBtnText(btn, 1500);
        },
        (error) => {
          btn.textContent = copyBtnFailedLabel;
          resetCopyBtnText(btn, 1500);
          console.log(error.message);
        }
      );
    }
    function resetCopyBtnText(btn, delay) {
      setTimeout(() => {
        btn.textContent = copyBtnLabel;
      }, delay);
    }
  }

  // 言語名を表示する関数
  function showLanguage(el, result) {
    if (result.language) {
      // 設定先を code 要素から pre 要素に変更
      el.parentElement.dataset.language = result.language;
    }
  }

  // 指定された行数または高さで表示する関数
  function setMaxLineHeight(el, pre) {
    // pre 要素に指定されているクラスを取得
    const preClassName = pre.className;
    if (preClassName) {
      // 正規表現パターンを作成（mxl-数値 | mxh-数値）
      const maxLineClassRegex = new RegExp(`${maxLinePrefix}(\\d+)|${maxHeightePrefix}(\\d+)`);
      // 行数または高さを指定するクラスにマッチするかどうか
      const matched = preClassName.match(maxLineClassRegex);
      // マッチする場合は、行数の数値部分 matched[1] または高さの数値部分 matched[2] を取得して高さを設定
      if (matched) {
        pre.classList.add('max-lines');  // ★★★ 追加 ★★★
        // 各行の先頭の span 要素（.line-num）を全て取得
        const lineNumSpans = el.getElementsByClassName("line-num");
        // code 要素のスタイル
        const elComputedStyle = window.getComputedStyle(el);
        // code 要素の垂直方向のパディング
        const elPaddingY = parseFloat(elComputedStyle.paddingTop) + parseFloat(elComputedStyle.paddingBottom);
        // 行数を指定されたかどうかのフラグ
        let isMaxLineNum = false;
        // 行数のパターンにマッチした場合
        if (matched[1]) {
          isMaxLineNum = true;
          const maxLines = parseInt(matched[1]);
          // 指定された行数が有効な値であれば
          if (lineNumSpans.length > 0 && maxLines < lineNumSpans.length) {
            // 指定された行の次の行の行番号の span 要素
            const targetLineNumSpan = lineNumSpans[maxLines];
            if (targetLineNumSpan) {
              // 指定された行の次の行の行番号の span 要素の offsetTop を使って code 要素の高さを設定（** 3 は調整値：必要に応じて）
              el.style.setProperty( "height", targetLineNumSpan.offsetTop -elPaddingY + 3 + "px");
              el.style.setProperty("overflow-y", "scroll");
              // 情報バーを表示
              addScrollFooter(isMaxLineNum, lineNumSpans, maxLines);
            }
          }
          // 高さのパターンにマッチした場合
        } else if (matched[2]) {
          const maxHeight = parseInt(matched[2]);
          if (el.offsetHeight && el.offsetHeight > maxHeight && maxHeight > elPaddingY) {
            // ツールバーがない場合の code 要素の高さが maxHeight になる（正確に maxHeight にはならない）
            el.style.setProperty("height", maxHeight -elPaddingY + "px");
            el.style.setProperty("overflow-y", "scroll");
            addScrollFooter();
          }
        }
      }
      // コードの下に情報バーを表示する関数
      function addScrollFooter(isMaxLineNum, lineNumSpans, maxLines) {
        if(showScrollFooter && !pre.classList.contains('no-scroll-footer') || !showScrollFooter && pre.classList.contains('show-scroll-footer')) {
          const wrapper = pre.parentElement;
          wrapper.insertAdjacentHTML('beforeend', `<div class="scroll-footer"><span class="scroll-footer-text">${scrollableText}</span></div>`);
          // 行数（mxh-*）を指定された場合
          if(isMaxLineNum) {
            const scrollFooter = wrapper.querySelector('.scroll-footer');
            if(showLineNumInfo && !pre.classList.contains('no-line-info') || !showLineNumInfo && pre.classList.contains('show-line-info')) {
              scrollFooter.insertAdjacentHTML('afterbegin', `<span class="line-count">Showing ${maxLines} of ${lineNumSpans.length} lines</span>`);
            }
          }
        }
      }
    }
  }
  /*  ここまで Highlight.js 独自プラグインの定義（初期化の前に定義）  */

  // 全てのコードブロックの要素を取得
  const blockCodeElems = document.getElementsByClassName("wp-block-code");

  // コードブロックの要素があればコードブロックの要素をラッパーで囲んで初期化
  if(blockCodeElems.length > 0) {
    // デフォルトでコードをハイライト表示する場合
    if(highlightByDefault) {
      for (const elem of blockCodeElems) {
        if(!elem.classList.contains(noHighlightClass)) {
          initHighlightJs(elem);
        }
      }
    }else{
      // デフォルトでコードをハイライト表示しない場合
      for (const elem of blockCodeElems) {
        if(elem.classList.contains(highlightClass)) {
          initHighlightJs(elem);
        }
      }
    }
  }

  // コードブロックの要素をラッパーで囲み Highlight.js で初期化する関数（pre 要素を引数に受け取る）
  function initHighlightJs(elem) {
    // コードブロックの要素をラッパーで囲む
    const wrapper = document.createElement('div');
    wrapper.className = wrapperClass;
    elem.insertAdjacentElement('beforebegin', wrapper);
    wrapper.appendChild(elem);
    const pre = wrapper.querySelector("pre");
    const code = wrapper.querySelector("code");
    if(pre && code) {
      // Highlight.js で code 要素を初期化
      hljs.highlightElement(code);
      // 行番号の表示・非表示の調整
      lineNumControl(pre, code);
      // 行折り返しの調整
      lineWrapControl(pre);
      // 言語名の表示・非表示の調整
      languageNameControl(pre);
      // ツールバーを追加する関数の呼び出し
      addToolbar(wrapper, pre, code);
    }
  }

  // 言語名の表示・非表示の調整
  function languageNameControl(pre) {
    const preClassList = pre.classList;
    if( !preClassList.contains(showLangClass) && (!showLangNameByDefault || preClassList.contains(noLangClass))) {
      pre.setAttribute('data-language', '');
      pre.classList.add('empty-lang-name');
    }
  }

  // 行番号の表示・非表示の調整
  function lineNumControl(pre, code) {
    if(!showLineNumByDefault && !pre.classList.contains(showLineNumClass) || pre.classList.contains(noLineNumClass) ) {
      code.classList.add('hide-line-num');
    }
  }

  // 行折り返しの調整
  function lineWrapControl(pre) {
    const preClassList =  pre.classList;
    if(!lineWrapByDefault && !preClassList.contains("pre-wrap")) preClassList.add("pre");
  }

  // ツールバーを追加する関数
  function addToolbar(wrapper, pre, code) {
    const preClassList = pre.classList;
    if (preClassList.contains(noToolbarClass) || (!showToolbarByDefault && !preClassList.contains(showToolbarClass))) {
      return;
    }
    const toolbar = document.createElement("div");
    toolbar.setAttribute("class", toolbarElemClass);
    // ツールバーの HTML に行番号と折り返しの切り替えボタンを追加
    toolbar.innerHTML = `<button type="button" class="line-num-btn">${lineNumLabel}</button>
  <button type="button" class="line-wrap-btn">${lineWrapLabel}</button>`;
    wrapper.insertBefore(toolbar, wrapper.firstElementChild);
    wrapper.classList.add("toolbar-added");
    // 行番号表示が有効かどうか
    let showLineNums = showLineNumByDefault;
    if (preClassList.contains(noLineNumClass)) showLineNums = false;
    if (preClassList.contains(showLineNumClass)) showLineNums = true;

    // 行番号表示が有効な場合はボタンに active クラスを追加し、無効な場合は非表示
    const lineNumBtn = toolbar.querySelector(".line-num-btn");
    if (showLineNums) {
      lineNumBtn.classList.add("active");
    }
    // 行番号表示切り替えボタンにクリックイベントを設定
    lineNumBtn.addEventListener("click", () => {
      if (showLineNums) {
        code.classList.add('hide-line-num');
      }else{
        code.classList.remove('hide-line-num');
      }
      showLineNums = !showLineNums;
      lineNumBtn.classList.toggle("active");
    });
    // 自動折り返しが有効かどうか
    let enableLineWrap = lineWrapByDefault;
    if (preClassList.contains("pre")) enableLineWrap = false;
    if (preClassList.contains("pre-wrap")) enableLineWrap = true;
    if(!enableLineWrap) preClassList.add("pre");
    const lineWrapBtn = toolbar.querySelector(".line-wrap-btn");
    // 自動折り返しが有効な場合はボタンに active クラスを追加
    if (enableLineWrap) lineWrapBtn.classList.add("active");
    // 自動折り返し切り替えボタンにクリックイベントを設定
    lineWrapBtn.addEventListener("click", () => {
      if (!enableLineWrap) {
        resetWhiteSpaceClasses();
        preClassList.add("pre-wrap");
      } else {
        resetWhiteSpaceClasses();
        preClassList.add("pre");
      }
      enableLineWrap = !enableLineWrap;
      lineWrapBtn.classList.toggle("active");
      // ★★★ 追加 ★★★
      const lineNumSpans = code.getElementsByClassName("line-num");
      const lineNumSpansLength = lineNumSpans.length;
      const lastLineNumSpan = lineNumSpans[lineNumSpansLength-1];
      const borderSpan = code.querySelector('.hljs-border-span');
      const codePaddingBottom = parseFloat(window.getComputedStyle(code).paddingBottom);
      if(lastLineNumSpan) {
        borderSpan.style.setProperty('height', lastLineNumSpan.offsetTop + lastLineNumSpan.offsetHeight + codePaddingBottom + 'px')
      }
      // ★★★ ここまで ★★★
    });
    function resetWhiteSpaceClasses() {
      preClassList.remove('pre');
      preClassList.remove('pre-wrap');
    }
    const copyBtn = wrapper.querySelector(".hljs-copy-btn");
    // コピーボタンが追加されていれば、ツールバーに移動
    if (copyBtn) {
      toolbar.appendChild(copyBtn);
    }
  }
}

.hljs-wrap {
  position: relative;

  pre {
    counter-reset: lineNumber;
    /* オーバーフローは隠す */
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  pre code {
    /* 行番号部分の幅を確保 */
    padding-left: 3.25rem;
    /* 行番号部の絶対配置の基準 */
    position: relative;
    /* ★★★ オーバーフローは隠す（追加）★★★ */
    overflow-y: hidden;
  }

  /* span.line-num の擬似要素で行番号を表示 */
  pre code span.line-num::before {
    counter-increment: lineNumber;
    content: counter(lineNumber);
    display: inline-block;
    /* 絶対配置 */
    position: absolute;
    left: 0;
    /* 行番号の幅（フォント設定などにより調整） */
    width: 2.5rem;
    /* 行番号の色 （以下は好みで調整） */
    color: #5f9168;
    /* 行番号とコードの余白 */
    margin-right: 5px;
    padding-right: 5px;
    /* 中央寄せ */
    text-align: center;
  }

  /* 行番号を非表示にする場合 */
  pre code.hide-line-num span.line-num::before {
    left: -2.5rem;
  }

  /* 行番号を非表示にする場合 */
  pre code.hide-line-num {
    margin-left: -2.5rem;
  }

  /* ★★★ 枠線用の span 要素（追加） ★★★  */
  code .hljs-border-span {
    background-color: transparent;
    /* 行番号（span.line-num::before）の幅と合わせる */
    width: 2.5rem;
    border-right: 1px solid #3d435b;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* ★★★ 枠線用の span 要素（追加） ★★★  */
  code.hide-line-num .hljs-border-span {
    border-right: none;
  }

  /* pre クラスを指定すると折り返しなし */
  pre.pre code {
    white-space: pre;
  }

  /* pre-wrap クラスを指定すると自動的に折り返し */
  pre.pre-wrap code {
    white-space: pre-wrap;
  }

  /* コピーボタンのスタイル（好みに応じて変更） */
  .hljs-copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #474646;
    padding: 5px 10px;
    background-color: #201e1e;
    color: #999;
    cursor: pointer;
    z-index: 100;
  }

  /* ツールバーを表示している場合はコピーボタンの position を変更  */
  .highlight-toolbar .hljs-copy-btn {
    position: relative;
  }

  /* コピーボタンが表示されている場合のパディングトップ */
  code.copy-btn-added {
    padding-top: 2rem;
  }

  pre.no-toolbar code.copy-btn-added {
    padding-top: 1.5rem;
  }

  /* ツールバーにコピーボタンが表示されている場合のパディングトップ */
  &.toolbar-added code.copy-btn-added {
    padding-top: 1em;
  }

  /* 疑似要素と content で言語名を表示（code 要素から pre 要素に変更） */
  pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #aaa;
    display: inline-block;
    padding: 0.5rem;
    pointer-events: none;
    z-index: 50;
  }

  &:not(.toolbar-added) pre[data-language]::before {
    background-color: #282c34;
  }

  pre[data-language],
  pre[data-language].no-toolbar.no-copy {
    padding-top: 2rem;
  }

  pre[data-language].no-toolbar {
    padding-top: 1rem;
  }

  &.toolbar-added pre[data-language],
  pre[data-language].no-toolbar.no-copy.show-no-lang {
    padding-top: 0;
  }

  pre[data-language].empty-lang-name {
    padding-top: 0;
  }

  /* ツールバー */
  .highlight-toolbar {
    height: 2.5rem;
    background-color: #3a3e4a;
    padding-right: 5px;
    color: #999;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }

  /* ツールバーと pre 要素の間のマージン */
  .highlight-toolbar + pre {
    margin-top: 0;
  }

  /* ツールバーの行番号表示と折り返し切り替えボタン */
  .line-num-btn,
  .line-wrap-btn {
    background-color: transparent;
    border: none;
    color: #999;
    cursor: pointer;
  }

  /* 行番号表示と折り返し切り替えボタンが有効時の色 */
  .line-num-btn.active,
  .line-wrap-btn.active {
    color: #2799a3;
  }

  /* 行数を指定して表示する場合にコード下に表示する領域 */
  .scroll-footer {
    margin: 0;
    font-size: 0.75rem;
    color: #999;
    /* コードの背景色と同じ色 */
    background-color: #282c34;
    padding: 8px;
    display: flex;
    justify-content: flex-end;
  }

  /* .scroll-footer の右端に表示するテキスト*/
  .scroll-footer-text {
    margin-left: auto;
  }

  /* .scroll-footer-text の左側に表示するアイコン（色は fill='%23aaaaaa' の aaaaaa 部分） */
  .scroll-footer-text::before {
    content: "";
    display: inline-block;
    height: 0.875rem;
    width: 0.875rem;
    vertical-align: -2px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaaaaa' viewBox='0 0 16 16'%3E  %3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
  }
}

document.addEventListener('DOMContentLoaded', () => {
  mySetupHighlightJS();
});

function mySetupHighlightJS() {
  // ツールバーの自動改行ボタンのラベル
  const lineWrapLabel = "wrap";
  // ツールバーの行番号ボタンのラベル
  const lineNumLabel = "number";
  // コピーボタンのラベルとメッセージ
  const copyBtnLabel = "Copy";
  const copyBtnCompleteLabel = "Copied";
  const copyBtnFailedLabel = "Failed";
  const copyFailedMessage = "Sorry, can not copy with this browser.";

  // デフォルトでコードをハイライト表示するかどうか
  const highlightByDefault = true;
  // デフォルトでハイライト表示する場合に、ハイライトしないコードブロックに指定するクラス名
  const noHighlightClass = "no-highlight";
  // デフォルトでハイライト表示しない場合に、ハイライトするコードブロックに指定するクラス名
  const highlightClass = "highlight";

  // デフォルトで行番号を表示するかどうか
  const showLineNumByDefault = true;
  // 行番号を表示しない場合に指定するクラス名（変更不可）
  const noLineNumClass = "no-line-num";
  // デフォルトで行番号を表示しない場合に、個別に行番号を表示する場合に指定するクラス名
  const showLineNumClass= "show-line-num";
  // 行の開始番号を指定するクラスの接頭辞（start-10：開始行番号を10にする）
  const lineNumStartPrefix = "start-";

  // デフォルトで行を自動折り返しするかどうか
  const lineWrapByDefault = true;

  // デフォルトでツールバーを表示するかどうか
  const showToolbarByDefault = true;
  // 個別にツールバーを表示しない場合に指定するクラス名
  const noToolbarClass = "no-toolbar";
  // 個別にツールバーを表示する場合に指定するクラス名
  const showToolbarClass = "show-toolbar";

  // デフォルトで言語名を表示するかどうか
  const showLangNameByDefault = true;
  // 個別に言語名を表示しない場合に指定するクラス名
  const noLangClass = "show-no-lang";
  // 個別に言語名を表示する場合に指定するクラス名
  const showLangClass = "show-lang";

  // デフォルトでコピーボタンを表示するかどうか
  const showCopyByDefault = true;
  // コピーボタンを表示しない場合に指定するクラス名
  const noCopyClass = "no-copy";
  // 個別にツールバーを表示する場合に指定するクラス名
  const showCopyClass = "show-copy";

  // 行数を指定して表示する場合に指定するクラス名の接頭辞（数値の前の部分）
  const maxLinePrefix = "mxl-";
  // 高さ（px）を指定して表示する場合に指定するクラス名の接頭辞（数値の前の部分）
  const maxHeightePrefix = "mxh-";
  // 行数や高さを指定して表示する場合にコードの下に情報バーを表示するかどうか
  const showScrollFooter = true;
  // 上記を表示する場合に表示するデフォルトのテキスト
  const scrollableText = 'scrollable';
  // 情報バーを表示する場合に行数の情報を表示するかどうか（mxh-* を指定した場合）
  const showLineNumInfo = true;

  // コードブロックのラッパー要素のクラス名（変更不可）
  const wrapperClass = "hljs-wrap";
  // ツールバーの div 要素のクラス名
  const toolbarElemClass = "highlight-toolbar";

  /*  Highlight.js 独自プラグインの定義  */
  hljs.addPlugin({
    "after:highlightElement": ({ el, result, text }) => {
      // pre 要素（親要素）を取得して関数の呼び出しで引数に追加
      const pre = el.parentElement;
      if( pre.tagName === 'PRE') {
        // 行番号を表示
        addLineNumbers(el, result, pre);
        // コピーボタンを表示
        copyCode(text, pre);
        // 言語名を表示
        showLanguage(el, result, pre);
        // 指定された行数または高さで表示
        setMaxLineHeight(el, pre);
      }
    },
  });

  // 行番号を表示する関数
  function addLineNumbers(el, result, pre) {
    el.innerHTML = result.value.replace( /^/gm, '<span class="line-num"></span>');
    // pre 要素に指定されているクラス
    const preClassName = pre.className;
    if (preClassName) {
      // 正規表現パターンを作成（start-数値）
      const startLineClassRegex = new RegExp(
        `${lineNumStartPrefix}(-?\\d+)`
      );
      // 開始行番号を指定するクラスにマッチするかどうか
      const matched = preClassName.match(startLineClassRegex);
      // マッチする場合は、数値部分 matched[1] を取得して開始番号を設定
      if (matched && matched[1]) {
        const startNumber = parseInt(matched[1]);
        if (startNumber || startNumber === 0) {
          pre.style.setProperty('counter-reset', 'lineNumber ' + (startNumber - 1));
        }
      }
    }
    // ★★★ 追加 ★★★
    // ラッパーの要素を取得
    const wrapper = el.closest('.' + wrapperClass);
    // ラッパーの高さを取得
    const wrapperHeight = wrapper.offsetHeight;
    // 枠線用の span 要素を作成
    const borderSpan = document.createElement('span');
    // 枠線用の span 要素にクラスを設定
    borderSpan.classList.add('hljs-border-span');
    // 枠線用の span 要素を code 要素（el）に追加
    el.appendChild(borderSpan);
    // 枠線用の span 要素に position: absolute を設定
    borderSpan.style.setProperty('position', 'absolute');
    // 枠線用の span 要素にラッパーの高さを設定
    borderSpan.style.setProperty('height', wrapperHeight + 'px');
    // code 要素のスタイルを取得
    const elComputedStyle = window.getComputedStyle(el);
    // code 要素の paddingBottom
    const elPaddingBottom = parseFloat(elComputedStyle.paddingBottom);

    // ResizeObserver でラッパーのサイズを監視して枠線用の span 要素の高さを更新
    const myObserver = new ResizeObserver((entries) => {
      if (entries.length > 0 && entries[0]) {
        const entry = entries[0];
        // contentBoxSize が使えればその値を、そうでなければ contentRect の値を使用
        const newHeight = entry.contentBoxSize ? entry.contentBoxSize[0].blockSize : entry.contentRect.height;
        // 枠線用の span 要素にラッパーのサイズ変更後の高さを設定
        borderSpan.style.setProperty('height', newHeight + 'px');
        // pre 要素に max-lines クラスが指定されていれば
        if(pre.classList.contains('max-lines')) {
          // 行番号の最後の span 要素から高さを算出して枠線用の span 要素に設定
          const lineNumSpans = el.getElementsByClassName("line-num");
          if(lineNumSpans[lineNumSpans.length-1]) {
            const lastLineNumTop = lineNumSpans[lineNumSpans.length-1].offsetTop;
            const lastLineNumHeight = lineNumSpans[lineNumSpans.length-1].offsetHeight;
            borderSpan.style.setProperty('height', lastLineNumTop + lastLineNumHeight + elPaddingBottom + 'px');
          }
        }
      }
    });
    myObserver.observe(wrapper);
    // ★★★ ここまで ★★★
  }

  // コードをコピーするボタンを追加する関数
  function copyCode(text, pre) {
    if (showCopyByDefault && !pre.classList.contains(noCopyClass) || pre.classList.contains(showCopyClass)) {
      const copyButton = document.createElement("button");
      copyButton.setAttribute("class", "hljs-copy-btn");
      copyButton.textContent = copyBtnLabel;
      pre.after(copyButton);
      pre.querySelector("code").classList.add("copy-btn-added");
      copyButton.addEventListener("click", () => {
        copyToClipboard(copyButton, text);
      });
    }
    function copyToClipboard(btn, text) {
      if (!navigator.clipboard) {
        alert(copyFailedMessage);
      }
      navigator.clipboard.writeText(text).then(
        () => {
          btn.textContent = copyBtnCompleteLabel;
          resetCopyBtnText(btn, 1500);
        },
        (error) => {
          btn.textContent = copyBtnFailedLabel;
          resetCopyBtnText(btn, 1500);
          console.log(error.message);
        }
      );
    }
    function resetCopyBtnText(btn, delay) {
      setTimeout(() => {
        btn.textContent = copyBtnLabel;
      }, delay);
    }
  }

  // 言語名を表示する関数
  function showLanguage(el, result) {
    if (result.language) {
      // 設定先を code 要素から pre 要素に変更
      el.parentElement.dataset.language = result.language;
    }
  }

  // 指定された行数または高さで表示する関数
  function setMaxLineHeight(el, pre) {
    // pre 要素に指定されているクラスを取得
    const preClassName = pre.className;
    if (preClassName) {
      // 正規表現パターンを作成（mxl-数値 | mxh-数値）
      const maxLineClassRegex = new RegExp(`${maxLinePrefix}(\\d+)|${maxHeightePrefix}(\\d+)`);
      // 行数または高さを指定するクラスにマッチするかどうか
      const matched = preClassName.match(maxLineClassRegex);
      // マッチする場合は、行数の数値部分 matched[1] または高さの数値部分 matched[2] を取得して高さを設定
      if (matched) {
        pre.classList.add('max-lines');  // ★★★ 追加 ★★★
        // 各行の先頭の span 要素（.line-num）を全て取得
        const lineNumSpans = el.getElementsByClassName("line-num");
        // code 要素のスタイル
        const elComputedStyle = window.getComputedStyle(el);
        // code 要素の垂直方向のパディング
        const elPaddingY = parseFloat(elComputedStyle.paddingTop) + parseFloat(elComputedStyle.paddingBottom);
        // 行数を指定されたかどうかのフラグ
        let isMaxLineNum = false;
        // 行数のパターンにマッチした場合
        if (matched[1]) {
          isMaxLineNum = true;
          const maxLines = parseInt(matched[1]);
          // 指定された行数が有効な値であれば
          if (lineNumSpans.length > 0 && maxLines < lineNumSpans.length) {
            // 指定された行の次の行の行番号の span 要素
            const targetLineNumSpan = lineNumSpans[maxLines];
            if (targetLineNumSpan) {
              // 指定された行の次の行の行番号の span 要素の offsetTop を使って code 要素の高さを設定（** 3 は調整値：必要に応じて）
              el.style.setProperty( "height", targetLineNumSpan.offsetTop -elPaddingY + 3 + "px");
              el.style.setProperty("overflow-y", "scroll");
              // 情報バーを表示
              addScrollFooter(isMaxLineNum, lineNumSpans, maxLines);
            }
          }
          // 高さのパターンにマッチした場合
        } else if (matched[2]) {
          const maxHeight = parseInt(matched[2]);
          if (el.offsetHeight && el.offsetHeight > maxHeight && maxHeight > elPaddingY) {
            // ツールバーがない場合の code 要素の高さが maxHeight になる（正確に maxHeight にはならない）
            el.style.setProperty("height", maxHeight -elPaddingY + "px");
            el.style.setProperty("overflow-y", "scroll");
            addScrollFooter();
          }
        }
      }
      // コードの下に情報バーを表示する関数
      function addScrollFooter(isMaxLineNum, lineNumSpans, maxLines) {
        if(showScrollFooter && !pre.classList.contains('no-scroll-footer') || !showScrollFooter && pre.classList.contains('show-scroll-footer')) {
          const wrapper = pre.parentElement;
          wrapper.insertAdjacentHTML('beforeend', `<div class="scroll-footer"><span class="scroll-footer-text">${scrollableText}</span></div>`);
          // 行数（mxh-*）を指定された場合
          if(isMaxLineNum) {
            const scrollFooter = wrapper.querySelector('.scroll-footer');
            if(showLineNumInfo && !pre.classList.contains('no-line-info') || !showLineNumInfo && pre.classList.contains('show-line-info')) {
              scrollFooter.insertAdjacentHTML('afterbegin', `<span class="line-count">Showing ${maxLines} of ${lineNumSpans.length} lines</span>`);
            }
          }
        }
      }
    }
  }
  /*  ここまで Highlight.js 独自プラグインの定義（初期化の前に定義）  */

  // 全てのコードブロックの要素を取得
  const blockCodeElems = document.getElementsByClassName("wp-block-code");

  // コードブロックの要素があればコードブロックの要素をラッパーで囲んで初期化
  if(blockCodeElems.length > 0) {
    // デフォルトでコードをハイライト表示する場合
    if(highlightByDefault) {
      for (const elem of blockCodeElems) {
        if(!elem.classList.contains(noHighlightClass)) {
          initHighlightJs(elem);
        }
      }
    }else{
      // デフォルトでコードをハイライト表示しない場合
      for (const elem of blockCodeElems) {
        if(elem.classList.contains(highlightClass)) {
          initHighlightJs(elem);
        }
      }
    }
  }

  // コードブロックの要素をラッパーで囲み Highlight.js で初期化する関数（pre 要素を引数に受け取る）
  function initHighlightJs(elem) {
    // コードブロックの要素をラッパーで囲む
    const wrapper = document.createElement('div');
    wrapper.className = wrapperClass;
    elem.insertAdjacentElement('beforebegin', wrapper);
    wrapper.appendChild(elem);
    const pre = wrapper.querySelector("pre");
    const code = wrapper.querySelector("code");
    if(pre && code) {
      // Highlight.js で code 要素を初期化
      hljs.highlightElement(code);
      // 行番号の表示・非表示の調整
      lineNumControl(pre, code);
      // 行折り返しの調整
      lineWrapControl(pre);
      // 言語名の表示・非表示の調整
      languageNameControl(pre);
      // ツールバーを追加する関数の呼び出し
      addToolbar(wrapper, pre, code);
      // ファイル名を追加する関数の呼び出し（★★★ 追加 ★★★）
      addFileName(wrapper, pre);
    }
  }

  // ファイル名を追加する関数（★★★ 追加 ★★★）
  function addFileName(wrapper) {
    const prevES = wrapper.previousElementSibling;
    // 直前の段落ブロックが存在すれば以下を実行
    if(prevES) {
      // 直前の段落ブロックに file-name クラスが指定されていれば
      if(prevES.classList.contains('file-name')) {
        // 更に replace クラスが指定されていれば
        if(prevES.classList.contains('replace')) {
          // ラッパーに replace-lang-name クラスを追加
          wrapper.classList.add('replace-lang-name');
        }
        // 直前の file-name クラスが指定された段落ブロックを削除
        prevES.remove();
      // span 要素を作成
      const fileNameSpan = document.createElement('span');
      // 作成した span 要素のテキストに段落ブロックのテキストを設定
      fileNameSpan.textContent = prevES.textContent;
      // span 要素にクラスを設定
      fileNameSpan.setAttribute('class', 'file-name');
      // ラッパー（div.hljs-wrap）に span 要素を追加
      wrapper.appendChild(fileNameSpan);
      // ラッパーに file-name-added クラスを追加
      wrapper.classList.add('file-name-added');
      }
    }
  }

  // 言語名の表示・非表示の調整
  function languageNameControl(pre) {
    const preClassList = pre.classList;
    if( !preClassList.contains(showLangClass) && (!showLangNameByDefault || preClassList.contains(noLangClass))) {
      pre.setAttribute('data-language', '');
      pre.classList.add('empty-lang-name');
    }
  }

  // 行番号の表示・非表示の調整
  function lineNumControl(pre, code) {
    if(!showLineNumByDefault && !pre.classList.contains(showLineNumClass) || pre.classList.contains(noLineNumClass) ) {
      code.classList.add('hide-line-num');
    }
  }

  // 行折り返しの調整
  function lineWrapControl(pre) {
    const preClassList =  pre.classList;
    if(!lineWrapByDefault && !preClassList.contains("pre-wrap")) preClassList.add("pre");
  }

  // ツールバーを追加する関数
  function addToolbar(wrapper, pre, code) {
    const preClassList = pre.classList;
    if (preClassList.contains(noToolbarClass) || (!showToolbarByDefault && !preClassList.contains(showToolbarClass))) {
      return;
    }
    const toolbar = document.createElement("div");
    toolbar.setAttribute("class", toolbarElemClass);
    // ツールバーの HTML に行番号と折り返しの切り替えボタンを追加
    toolbar.innerHTML = `<button type="button" class="line-num-btn">${lineNumLabel}</button>
  <button type="button" class="line-wrap-btn">${lineWrapLabel}</button>`;
    wrapper.insertBefore(toolbar, wrapper.firstElementChild);
    wrapper.classList.add("toolbar-added");
    // 行番号表示が有効かどうか
    let showLineNums = showLineNumByDefault;
    if (preClassList.contains(noLineNumClass)) showLineNums = false;
    if (preClassList.contains(showLineNumClass)) showLineNums = true;

    // 行番号表示が有効な場合はボタンに active クラスを追加し、無効な場合は非表示
    const lineNumBtn = toolbar.querySelector(".line-num-btn");
    if (showLineNums) {
      lineNumBtn.classList.add("active");
    }
    // 行番号表示切り替えボタンにクリックイベントを設定
    lineNumBtn.addEventListener("click", () => {
      if (showLineNums) {
        code.classList.add('hide-line-num');
      }else{
        code.classList.remove('hide-line-num');
      }
      showLineNums = !showLineNums;
      lineNumBtn.classList.toggle("active");
    });
    // 自動折り返しが有効かどうか
    let enableLineWrap = lineWrapByDefault;
    if (preClassList.contains("pre")) enableLineWrap = false;
    if (preClassList.contains("pre-wrap")) enableLineWrap = true;
    if(!enableLineWrap) preClassList.add("pre");
    const lineWrapBtn = toolbar.querySelector(".line-wrap-btn");
    // 自動折り返しが有効な場合はボタンに active クラスを追加
    if (enableLineWrap) lineWrapBtn.classList.add("active");
    // 自動折り返し切り替えボタンにクリックイベントを設定
    lineWrapBtn.addEventListener("click", () => {
      if (!enableLineWrap) {
        resetWhiteSpaceClasses();
        preClassList.add("pre-wrap");
      } else {
        resetWhiteSpaceClasses();
        preClassList.add("pre");
      }
      enableLineWrap = !enableLineWrap;
      lineWrapBtn.classList.toggle("active");
      // ★★★ 追加 ★★★
      const lineNumSpans = code.getElementsByClassName("line-num");
      const lineNumSpansLength = lineNumSpans.length;
      const lastLineNumSpan = lineNumSpans[lineNumSpansLength-1];
      const borderSpan = code.querySelector('.hljs-border-span');
      const codePaddingBottom = parseFloat(window.getComputedStyle(code).paddingBottom);
      if(lastLineNumSpan) {
        borderSpan.style.setProperty('height', lastLineNumSpan.offsetTop + lastLineNumSpan.offsetHeight + codePaddingBottom + 'px')
      }
      // ★★★ ここまで ★★★
    });
    function resetWhiteSpaceClasses() {
      preClassList.remove('pre');
      preClassList.remove('pre-wrap');
    }
    const copyBtn = wrapper.querySelector(".hljs-copy-btn");
    // コピーボタンが追加されていれば、ツールバーに移動
    if (copyBtn) {
      toolbar.appendChild(copyBtn);
    }
  }
}

.hljs-wrap {
  position: relative;

  pre {
    counter-reset: lineNumber;
    /* オーバーフローは隠す */
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  pre code {
    /* 行番号部分の幅を確保 */
    padding-left: 3.25rem;
    /* 行番号部の絶対配置の基準 */
    position: relative;
    /* ★★★ オーバーフローは隠す（追加）★★★ */
    overflow-y: hidden;
  }

  /* span.line-num の擬似要素で行番号を表示 */
  pre code span.line-num::before {
    counter-increment: lineNumber;
    content: counter(lineNumber);
    display: inline-block;
    /* 絶対配置 */
    position: absolute;
    left: 0;
    /* 行番号の幅（フォント設定などにより調整） */
    width: 2.5rem;
    /* 行番号の色 （以下は好みで調整） */
    color: #5f9168;
    /* 行番号とコードの余白 */
    margin-right: 5px;
    padding-right: 5px;
    /* 中央寄せ */
    text-align: center;
  }

  /* 行番号を非表示にする場合 */
  pre code.hide-line-num span.line-num::before {
    left: -2.5rem;
  }

  /* 行番号を非表示にする場合 */
  pre code.hide-line-num {
    margin-left: -2.5rem;
  }

  /* ★★★ 枠線用の span 要素（追加） ★★★  */
  code .hljs-border-span {
    background-color: transparent;
    /* 行番号（span.line-num::before）の幅と合わせる */
    width: 2.5rem;
    border-right: 1px solid #3d435b;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* ★★★ 枠線用の span 要素（追加） ★★★  */
  code.hide-line-num .hljs-border-span {
    border-right: none;
  }

  /* pre クラスを指定すると折り返しなし */
  pre.pre code {
    white-space: pre;
  }

  /* pre-wrap クラスを指定すると自動的に折り返し */
  pre.pre-wrap code {
    white-space: pre-wrap;
  }

  /* コピーボタンのスタイル（好みに応じて変更） */
  .hljs-copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #474646;
    padding: 5px 10px;
    background-color: #201e1e;
    color: #999;
    cursor: pointer;
    z-index: 100;
  }

  /* ツールバーを表示している場合はコピーボタンの position を変更  */
  .highlight-toolbar .hljs-copy-btn {
    position: relative;
  }

  /* コピーボタンが表示されている場合のパディングトップ */
  code.copy-btn-added {
    padding-top: 2rem;
  }

  pre.no-toolbar code.copy-btn-added {
    padding-top: 1.5rem;
  }

  /* ツールバーにコピーボタンが表示されている場合のパディングトップ */
  &.toolbar-added code.copy-btn-added {
    padding-top: 1em;
  }

  /* 疑似要素と content で言語名を表示（code 要素から pre 要素に変更） */
  pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #aaa;
    display: inline-block;
    padding: 0.5rem;
    pointer-events: none;
    z-index: 50;
  }

  &:not(.toolbar-added) pre[data-language]::before {
    background-color: #282c34;
  }

  pre[data-language],
  pre[data-language].no-toolbar.no-copy {
    padding-top: 2rem;
  }

  pre[data-language].no-toolbar {
    padding-top: 1rem;
  }

  &.toolbar-added pre[data-language],
  pre[data-language].no-toolbar.no-copy.show-no-lang {
    padding-top: 0;
  }

  pre[data-language].empty-lang-name {
    padding-top: 0;
  }

  /* ツールバー */
  .highlight-toolbar {
    height: 2.5rem;
    background-color: #3a3e4a;
    padding-right: 5px;
    color: #999;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }

  /* ツールバーと pre 要素の間のマージン */
  .highlight-toolbar + pre {
    margin-top: 0;
  }

  /* ツールバーの行番号表示と折り返し切り替えボタン */
  .line-num-btn,
  .line-wrap-btn {
    background-color: transparent;
    border: none;
    color: #999;
    cursor: pointer;
  }

  /* 行番号表示と折り返し切り替えボタンが有効時の色 */
  .line-num-btn.active,
  .line-wrap-btn.active {
    color: #2799a3;
  }

  /* 行数を指定して表示する場合にコード下に表示する領域 */
  .scroll-footer {
    margin: 0;
    font-size: 0.75rem;
    color: #999;
    /* コードの背景色と同じ色 */
    background-color: #282c34;
    padding: 8px;
    display: flex;
    justify-content: flex-end;
  }

  /* .scroll-footer の右端に表示するテキスト*/
  .scroll-footer-text {
    margin-left: auto;
  }

  /* .scroll-footer-text の左側に表示するアイコン（色は fill='%23aaaaaa' の aaaaaa 部分） */
  .scroll-footer-text::before {
    content: "";
    display: inline-block;
    height: 0.875rem;
    width: 0.875rem;
    vertical-align: -2px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaaaaa' viewBox='0 0 16 16'%3E  %3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
  }

  /* ファイル名を絶対配置（位置などは環境に応じて調整） */
  .file-name {
    position: absolute;
    top: -1.5rem;
    right: 5px;
  }

  /* 言語名を空（半角スペース）に */
  &.replace-lang-name pre[data-language]::before {
    content: " ";
  }

  /* ツールバーがない場合のパディング */
  &.replace-lang-name.no-toolbar pre[data-language] {
    padding-top: 2rem;
  }

  /* 言語名の位置にファイル名を表示する場合のスタイル */
  &.replace-lang-name .file-name {
    top: 0.5rem;
    left: 0.5rem;
    color: #ccc;
    pointer-events: none;
  }

  /* ファイル名を上部に表示する場合のラッパーのマージンの調整（環境に応じて） */
  &:not(.replace-lang-name).file-name-added {
    margin-top: 3rem;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  mySetupHighlightJS();
});

function mySetupHighlightJS() {
  const lineWrapLabel = "wrap";
  const lineNumLabel = "number";
  const copyBtnLabel = "Copy";
  const copyBtnCompleteLabel = "Copied";
  const copyBtnFailedLabel = "Failed";
  const copyFailedMessage = "Sorry, can not copy with this browser.";

  const highlightByDefault = true;
  const noHighlightClass = "no-highlight";
  const highlightClass = "highlight";

  const showLineNumByDefault = true;
  const noLineNumClass = "no-line-num";
  const showLineNumClass= "show-line-num";
  const lineNumStartPrefix = "start-";

  const lineWrapByDefault = true;

  const showToolbarByDefault = true;
  const noToolbarClass = "no-toolbar";
  const showToolbarClass = "show-toolbar";

  const showLangNameByDefault = true;
  const noLangClass = "show-no-lang";
  const showLangClass = "show-lang";

  const showCopyByDefault = true;
  const noCopyClass = "no-copy";
  const showCopyClass = "show-copy";

  const maxLinePrefix = "mxl-";
  const maxHeightePrefix = "mxh-";
  const showScrollFooter = true;
  const scrollableText = 'scrollable';
  const showLineNumInfo = true;

  const wrapperClass = "hljs-wrap";
  const toolbarElemClass = "highlight-toolbar";
  const accordionClass = "accordion";

  hljs.addPlugin({
    "after:highlightElement": ({ el, result, text }) => {
      const pre = el.parentElement;
      if( pre.tagName === 'PRE') {
        addLineNumbers(el, result, pre);
        copyCode(text, pre);
        showLanguage(el, result, pre);
        setMaxLineHeight(el, pre);
      }
    },
  });

  function addLineNumbers(el, result, pre) {
    el.innerHTML = result.value.replace( /^/gm, '<span class="line-num"></span>');
    const preClassName = pre.className;
    if (preClassName) {
      const startLineClassRegex = new RegExp(
        `${lineNumStartPrefix}(-?\\d+)`
      );
      const matched = preClassName.match(startLineClassRegex);
      if (matched && matched[1]) {
        const startNumber = parseInt(matched[1]);
        if (startNumber || startNumber === 0) {
          pre.style.setProperty('counter-reset', 'lineNumber ' + (startNumber - 1));
        }
      }
    }
    const wrapper = el.closest('.' + wrapperClass);
    const wrapperHeight = wrapper.offsetHeight;
    const borderSpan = document.createElement('span');
    borderSpan.classList.add('hljs-border-span');
    el.appendChild(borderSpan);
    borderSpan.style.setProperty('position', 'absolute');
    borderSpan.style.setProperty('height', wrapperHeight + 'px');
    const elComputedStyle = window.getComputedStyle(el);
    const elPaddingBottom = parseFloat(elComputedStyle.paddingBottom);

    const myObserver = new ResizeObserver((entries) => {
      if (entries.length > 0 && entries[0]) {
        const entry = entries[0];
        const newHeight = entry.contentBoxSize ? entry.contentBoxSize[0].blockSize : entry.contentRect.height;
        borderSpan.style.setProperty('height', newHeight + 'px');
        if(pre.classList.contains('max-lines')) {
          const lineNumSpans = el.getElementsByClassName("line-num");
          if(lineNumSpans[lineNumSpans.length-1]) {
            const lastLineNumTop = lineNumSpans[lineNumSpans.length-1].offsetTop;
            const lastLineNumHeight = lineNumSpans[lineNumSpans.length-1].offsetHeight;
            borderSpan.style.setProperty('height', lastLineNumTop + lastLineNumHeight + elPaddingBottom + 'px');
          }
        }
      }
    });
    myObserver.observe(wrapper);
  }

  function copyCode(text, pre) {
    if (showCopyByDefault && !pre.classList.contains(noCopyClass) || pre.classList.contains(showCopyClass)) {
      const copyButton = document.createElement("button");
      copyButton.setAttribute("class", "hljs-copy-btn");
      copyButton.textContent = copyBtnLabel;
      pre.after(copyButton);
      pre.querySelector("code").classList.add("copy-btn-added");
      copyButton.addEventListener("click", () => {
        copyToClipboard(copyButton, text);
      });
    }
    function copyToClipboard(btn, text) {
      if (!navigator.clipboard) {
        alert(copyFailedMessage);
      }
      navigator.clipboard.writeText(text).then(
        () => {
          btn.textContent = copyBtnCompleteLabel;
          resetCopyBtnText(btn, 1500);
        },
        (error) => {
          btn.textContent = copyBtnFailedLabel;
          resetCopyBtnText(btn, 1500);
          console.log(error.message);
        }
      );
    }
    function resetCopyBtnText(btn, delay) {
      setTimeout(() => {
        btn.textContent = copyBtnLabel;
      }, delay);
    }
  }

  function showLanguage(el, result) {
    if (result.language) {
      el.parentElement.dataset.language = result.language;
    }
  }

  function setMaxLineHeight(el, pre) {
    const preClassName = pre.className;
    if (preClassName) {
      const maxLineClassRegex = new RegExp(`${maxLinePrefix}(\\d+)|${maxHeightePrefix}(\\d+)`);
      const matched = preClassName.match(maxLineClassRegex);
      if (matched) {
        pre.classList.add('max-lines');
        const lineNumSpans = el.getElementsByClassName("line-num");
        const elComputedStyle = window.getComputedStyle(el);
        const elPaddingY = parseFloat(elComputedStyle.paddingTop) + parseFloat(elComputedStyle.paddingBottom);
        let isMaxLineNum = false;
        if (matched[1]) {
          isMaxLineNum = true;
          const maxLines = parseInt(matched[1]);
          if (lineNumSpans.length > 0 && maxLines < lineNumSpans.length) {
            const targetLineNumSpan = lineNumSpans[maxLines];
            if (targetLineNumSpan) {
              el.style.setProperty( "height", targetLineNumSpan.offsetTop -elPaddingY + 3 + "px");
              el.style.setProperty("overflow-y", "scroll");
              addScrollFooter(isMaxLineNum, lineNumSpans, maxLines);
            }
          }
        } else if (matched[2]) {
          const maxHeight = parseInt(matched[2]);
          if (el.offsetHeight && el.offsetHeight > maxHeight && maxHeight > elPaddingY) {
            el.style.setProperty("height", maxHeight -elPaddingY + "px");
            el.style.setProperty("overflow-y", "scroll");
            addScrollFooter();
          }
        }
      }
      function addScrollFooter(isMaxLineNum, lineNumSpans, maxLines) {
        if(showScrollFooter && !pre.classList.contains('no-scroll-footer') || !showScrollFooter && pre.classList.contains('show-scroll-footer')) {
          const wrapper = pre.parentElement;
          wrapper.insertAdjacentHTML('beforeend', `<div class="scroll-footer"><span class="scroll-footer-text">${scrollableText}</span></div>`);
          if(isMaxLineNum) {
            const scrollFooter = wrapper.querySelector('.scroll-footer');
            if(showLineNumInfo && !pre.classList.contains('no-line-info') || !showLineNumInfo && pre.classList.contains('show-line-info')) {
              scrollFooter.insertAdjacentHTML('afterbegin', `<span class="line-count">Showing ${maxLines} of ${lineNumSpans.length} lines</span>`);
            }
          }
        }
      }
    }
  }

  const blockCodeElems = document.getElementsByClassName("wp-block-code");

  if(blockCodeElems.length > 0) {
    if(highlightByDefault) {
      for (const elem of blockCodeElems) {
        if(!elem.classList.contains(noHighlightClass)) {
          initHighlightJs(elem);
        }
      }
    }else{
      for (const elem of blockCodeElems) {
        if(elem.classList.contains(highlightClass)) {
          initHighlightJs(elem);
        }
      }
    }
  }

  function initHighlightJs(elem) {
    const wrapper = document.createElement('div');
    wrapper.className = wrapperClass;
    elem.insertAdjacentElement('beforebegin', wrapper);
    wrapper.appendChild(elem);
    const pre = wrapper.querySelector("pre");
    const code = wrapper.querySelector("code");
    if(pre && code) {
      hljs.highlightElement(code);
      lineNumControl(pre, code);
      lineWrapControl(pre);
      languageNameControl(pre);
      addToolbar(wrapper, pre, code);
      addFileName(wrapper, pre);
    }
  }

  function addFileName(wrapper) {
    const prevES = wrapper.previousElementSibling;
    if(prevES) {
      if(prevES.classList.contains('file-name')) {
        if(prevES.classList.contains('replace')) {
          wrapper.classList.add('replace-lang-name');
        }
        prevES.remove();
      const fileNameSpan = document.createElement('span');
      fileNameSpan.textContent = prevES.textContent;
      fileNameSpan.setAttribute('class', 'file-name');
      wrapper.appendChild(fileNameSpan);
      wrapper.classList.add('file-name-added');
      }
    }
  }

  function languageNameControl(pre) {
    const preClassList = pre.classList;
    if( !preClassList.contains(showLangClass) && (!showLangNameByDefault || preClassList.contains(noLangClass))) {
      pre.setAttribute('data-language', '');
      pre.classList.add('empty-lang-name');
    }
  }

  function lineNumControl(pre, code) {
    if(!showLineNumByDefault && !pre.classList.contains(showLineNumClass) || pre.classList.contains(noLineNumClass) ) {
      code.classList.add('hide-line-num');
    }
  }

  function lineWrapControl(pre) {
    const preClassList =  pre.classList;
    if(!lineWrapByDefault && !preClassList.contains("pre-wrap")) preClassList.add("pre");
  }

  function addToolbar(wrapper, pre, code) {
    const preClassList = pre.classList;
    if (preClassList.contains(noToolbarClass) || (!showToolbarByDefault && !preClassList.contains(showToolbarClass))) {
      return;
    }
    const toolbar = document.createElement("div");
    toolbar.setAttribute("class", toolbarElemClass);
    toolbar.innerHTML = `<button type="button" class="line-num-btn">${lineNumLabel}</button>
  <button type="button" class="line-wrap-btn">${lineWrapLabel}</button>`;
    wrapper.insertBefore(toolbar, wrapper.firstElementChild);
    wrapper.classList.add("toolbar-added");
    let showLineNums = showLineNumByDefault;
    if (preClassList.contains(noLineNumClass)) showLineNums = false;
    if (preClassList.contains(showLineNumClass)) showLineNums = true;

    const lineNumBtn = toolbar.querySelector(".line-num-btn");
    if (showLineNums) {
      lineNumBtn.classList.add("active");
    }
    lineNumBtn.addEventListener("click", () => {
      if (showLineNums) {
        code.classList.add('hide-line-num');
      }else{
        code.classList.remove('hide-line-num');
      }
      showLineNums = !showLineNums;
      lineNumBtn.classList.toggle("active");
    });
    let enableLineWrap = lineWrapByDefault;
    if (preClassList.contains("pre")) enableLineWrap = false;
    if (preClassList.contains("pre-wrap")) enableLineWrap = true;
    if(!enableLineWrap) preClassList.add("pre");
    const lineWrapBtn = toolbar.querySelector(".line-wrap-btn");
    if (enableLineWrap) lineWrapBtn.classList.add("active");
    lineWrapBtn.addEventListener("click", () => {
      if (!enableLineWrap) {
        resetWhiteSpaceClasses();
        preClassList.add("pre-wrap");
      } else {
        resetWhiteSpaceClasses();
        preClassList.add("pre");
      }
      enableLineWrap = !enableLineWrap;
      lineWrapBtn.classList.toggle("active");
      const lineNumSpans = code.getElementsByClassName("line-num");
      const lineNumSpansLength = lineNumSpans.length;
      const lastLineNumSpan = lineNumSpans[lineNumSpansLength-1];
      const borderSpan = code.querySelector('.hljs-border-span');
      const codePaddingBottom = parseFloat(window.getComputedStyle(code).paddingBottom);
      if(lastLineNumSpan) {
        borderSpan.style.setProperty('height', lastLineNumSpan.offsetTop + lastLineNumSpan.offsetHeight + codePaddingBottom + 'px')
      }
    });
    function resetWhiteSpaceClasses() {
      preClassList.remove('pre');
      preClassList.remove('pre-wrap');
    }
    const copyBtn = wrapper.querySelector(".hljs-copy-btn");
    if (copyBtn) {
      toolbar.appendChild(copyBtn);
    }
  }

  addAccordionAnimationToCodeBlocks(wrapperClass, accordionClass);
}

function addAccordionAnimationToCodeBlocks(targetWrapperSelector, targetClassName) {
  let summaryOpenText = "コードを表示";
  let summaryCloseText = "コードを閉じる";
  const detailsClass='wdl-toggle-code-animation';
  const detailsContentClass='details-content';
  const detailsContentWrapperClass='details-content-wrapper';

  const targetWrapperElems = document.getElementsByClassName(targetWrapperSelector);
  for (const elem of targetWrapperElems)  {

    // 次の兄弟要素（直後の要素）を取得
    const nextES = elem.nextElementSibling;
    // 直後の要素が存在する場合
    if(nextES) {
      // 直後の要素（段落ブロック）に toggle-text クラスが指定されていれば
      if(nextES.classList.contains('toggle-text')) {
        // テキストをカンマ（,）で分割
        const toggleTextArray = nextES.textContent.split(',');
        // 最初の要素が空でなければ、その値を summaryOpenText に設定
        if(toggleTextArray[0] && toggleTextArray[0].trim() !=='') {
          summaryOpenText = toggleTextArray[0].trim();
        }
        // 2番目の要素が空でなければ、その値を summaryCloseText に設定
        if(toggleTextArray[1] && toggleTextArray[1].trim() !=='') {
          summaryCloseText = toggleTextArray[1].trim();
        }
        // toggle-text クラスが指定された要素を削除
        nextES.remove();
      }
    }

    const pre = elem.querySelector('pre');
    if(pre && pre.classList.contains(targetClassName)) {
      const details = document.createElement('details');
      details.classList.add(detailsClass);
      details.innerHTML = `<summary data-close-text="${summaryCloseText}">${summaryOpenText}</summary>
      <div class="${detailsContentWrapperClass}">
        <div class="${detailsContentClass}"></div>
      </div>`;
      elem.insertAdjacentElement('beforebegin', details);
      details.querySelector('.' + detailsContentClass).appendChild(elem);
    }
  }

  const details = document.getElementsByClassName(detailsClass);
  for (const elem of details)  {
    const summary = elem.querySelector('summary');
    const content = elem.querySelector('.' + detailsContentClass);
    const summaryText = summary.textContent;
    const summaryCloseText = summary.dataset.closeText ? summary.dataset.closeText : '閉じる';
    let isAnimating = false;
    summary.addEventListener('click', (e) => {
      e.preventDefault();
      if (isAnimating === true) {
        return;
      }
      if (elem.open) {
        summary.textContent = summaryText;
        isAnimating = true;
        const closeDetails = content.animate(
          {
            opacity: [1, 0],
            height: [content.offsetHeight + 'px', 0],
          },
          {
            duration: 300,
            easing: 'ease-in',
          }
        );
        const rotateIcon = summary.animate(
          { rotate: ["90deg", "0deg"] },
          {
            duration: 300,
            pseudoElement: "::before",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        closeDetails.onfinish = () => {
          elem.removeAttribute('open');
          isAnimating = false;
        }
      } else {
        elem.setAttribute('open', 'true');
        summary.textContent = summaryCloseText;
        isAnimating = true;
        const openDetails = content.animate(
          {
            opacity: [0, 1],
            height: [0, content.offsetHeight + 'px'],
          },
          {
            duration: 300,
            easing: 'ease-in',
          }
        );
        const rotateIcon = summary.animate(
          { rotate: ["0deg", "90deg"] },
          {
            duration: 300,
            pseudoElement: "::before",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        openDetails.onfinish = () => {
          isAnimating = false;
        }
      }
    });
  }
}

.hljs-wrap {
  position: relative;

  pre {
    counter-reset: lineNumber;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  pre code {
    padding-left: 3.25rem;
    position: relative;
    overflow-y: hidden;
  }

  pre code span.line-num::before {
    counter-increment: lineNumber;
    content: counter(lineNumber);
    display: inline-block;
    position: absolute;
    left: 0;
    width: 2.5rem;
    color: #5f9168;
    margin-right: 5px;
    padding-right: 5px;
    text-align: center;
  }

  pre code.hide-line-num span.line-num::before {
    left: -2.5rem;
  }

  pre code.hide-line-num {
    margin-left: -2.5rem;
  }

  code .hljs-border-span {
    background-color: transparent;
    width: 2.5rem;
    border-right: 1px solid #3d435b;
    position: absolute;
    top: 0;
    left: 0;
  }

  code.hide-line-num .hljs-border-span {
    border-right: none;
  }

  pre.pre code {
    white-space: pre;
  }

  pre.pre-wrap code {
    white-space: pre-wrap;
  }

  .hljs-copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #474646;
    padding: 5px 10px;
    background-color: #201e1e;
    color: #999;
    cursor: pointer;
    z-index: 100;
  }

  .highlight-toolbar .hljs-copy-btn {
    position: relative;
  }

  code.copy-btn-added {
    padding-top: 2rem;
  }

  pre.no-toolbar code.copy-btn-added {
    padding-top: 1.5rem;
  }

  &.toolbar-added code.copy-btn-added {
    padding-top: 1em;
  }

  pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #aaa;
    display: inline-block;
    padding: 0.5rem;
    pointer-events: none;
    z-index: 50;
  }

  &:not(.toolbar-added) pre[data-language]::before {
    background-color: #282c34;
  }

  pre[data-language],
  pre[data-language].no-toolbar.no-copy {
    padding-top: 2rem;
  }

  pre[data-language].no-toolbar {
    padding-top: 1rem;
  }

  &.toolbar-added pre[data-language],
  pre[data-language].no-toolbar.no-copy.show-no-lang {
    padding-top: 0;
  }

  pre[data-language].empty-lang-name {
    padding-top: 0;
  }

  .highlight-toolbar {
    height: 2.5rem;
    background-color: #3a3e4a;
    padding-right: 5px;
    color: #999;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }

  .highlight-toolbar + pre {
    margin-top: 0;
  }

  .line-num-btn,
  .line-wrap-btn {
    background-color: transparent;
    border: none;
    color: #999;
    cursor: pointer;
  }

  .line-num-btn.active,
  .line-wrap-btn.active {
    color: #2799a3;
  }

  .scroll-footer {
    margin: 0;
    font-size: 0.75rem;
    color: #999;
    background-color: #282c34;
    padding: 8px;
    display: flex;
    justify-content: flex-end;
  }

  .scroll-footer-text {
    margin-left: auto;
  }

  .scroll-footer-text::before {
    content: "";
    display: inline-block;
    height: 0.875rem;
    width: 0.875rem;
    vertical-align: -2px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaaaaa' viewBox='0 0 16 16'%3E  %3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
  }

  .file-name {
    position: absolute;
    top: -1.5rem;
    right: 5px;
  }

  &.replace-lang-name pre[data-language]::before {
    content: " ";
  }

  &.replace-lang-name.no-toolbar pre[data-language] {
    padding-top: 2rem;
  }

  &.replace-lang-name .file-name {
    top: 0.5rem;
    left: 0.5rem;
    color: #ccc;
    pointer-events: none;
  }

  &:not(.replace-lang-name).file-name-added {
    margin-top: 3rem;
  }
}

/* アコーディオンパネルのスタイル */
details.wdl-toggle-code-animation {
  border: none;
  margin: 2rem 0;

  .details-content-wrapper {
    padding: 1rem 0;
  }

  .details-content {
    overflow: hidden;
  }

  summary {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 0.5rem 1rem 0.5rem 32px;
    border: 1px solid #aaa;
    font-size: 13px;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto 0;
    width: 8px;
    height: 8px;
    border-top: 3px solid #097b27;
    border-right: 3px solid #097b27;
    transform: rotate(45deg);
  }
}

/* 以下を追加 */
.toggle-text {
  display: none;
}