Web Design Leaves

<pre ><code class="language-foo">Not valid language name.</code></pre>

// すべての pre 要素を取得
const preElements = document.querySelectorAll('pre');

// 各 pre 要素に対して処理を行う
preElements.forEach( (preElement) => {
  // pre 要素内の HTML を取得
  const preHTML = preElement.innerHTML;
  // <code> の前の改行や空白文字を削除
  let formattedHTML = preHTML.replace(/\n*\s*<code(.*)>/g, '<code$1>');
  // </code> の後の改行や空白文字を削除
  formattedHTML = formattedHTML.replace(/<\/code>\n*\s*/g, '</code>');
  // 更新された HTML を pre 要素に設定
  preElement.innerHTML = formattedHTML;
});

// Highlight.js の初期化
hljs.highlightAll();

document.querySelectorAll('pre').forEach( (elem) => {
  elem.innerHTML = elem.innerHTML.replace(/\n*\s*<code(.*)>/g, '<code$1>').replace(/<\/code>\n*\s*/g, '</code>');
});

hljs.highlightAll();

<pre>テキスト<code class="language-javascript">function add(x,y) {
  return x + y;
}
console.log(add(1,2));  // 3</code></pre>

document.addEventListener('DOMContentLoaded', (event) => {
  // .hljs-wrap の子孫のコード（pre code）をハイライト
  document.querySelectorAll('.hljs-wrap pre code').forEach((el) => {
    hljs.highlightElement(el);
  });
  // pre 要素なしの code 要素（code.highlight）をハイライト
  document.querySelectorAll('code.highlight').forEach((el) => {
    hljs.highlightElement(el);
  });
});

<div class="hljs-wrap">
  <pre><code>...</code></pre>
</div>

.hljs-wrap pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.hljs-wrap pre.nowrap {
  white-space: pre;
}

@media screen and (max-width : 640px) {
  .hljs-wrap pre {
    white-space: pre;
  }
}

<div class="hljs-wrap">
  <pre data-label="ラベル"><code>...</code></pre>
</div>

.hljs-wrap {
  position: relative; /* 絶対配置の基準 */
}

pre[data-label]::before {
  content: attr(data-label);  /* data-label の値を取得 */
  position: absolute;  /* 絶対配置 */
  top: -2rem;  /* 表示位置の調整 */
  left: 0;  /* 表示位置の調整 */
  color: #999;
  display: inline-block;
  padding: 0.5rem 0;
}

<div class="hljs-wrap">
  <pre data-label="ラベル"><code>...</code></pre>
</div>

document.addEventListener('DOMContentLoaded', () => {
  // hljs-wrap クラスを指定した div 要素（div.hljs-wrap）を全て取得
  const hljsWrappers = document.querySelectorAll('div.hljs-wrap');
  // div.hljs-wrap が1つ以上あれば
  if (hljsWrappers.length > 0) {
    hljsWrappers.forEach((wrapper) => {
      // div.hljs-wrap の子要素の pre 要素を取得
      const pre = wrapper.firstElementChild;
      // pre 要素が存在しなければ終了
      if (!pre) { return; }
      // pre 要素に data-label が設定されていれば
      if (pre.hasAttribute('data-label')) {
        // span 要素を作成
        const labelSpan = document.createElement('span');
        // span 要素のテキストに pre 要素の data-label 属性の値を設定
        labelSpan.textContent = pre.dataset.label;
        // span 要素にクラスを設定
        labelSpan.setAttribute('class', 'hljs-label');
        // div.hljs-wrap に span 要素を追加
        wrapper.appendChild(labelSpan);
      }
    });
  }
});

.hljs-wrap {
  position: relative; /* 絶対配置の基準 */
}

.hljs-wrap .hljs-label {
  position: absolute; /* 絶対配置 */
  top: -2rem;  /* 表示位置の調整 */
  left: 0;  /* 表示位置の調整 */
  color: #999;
  display: inline-block;
  padding: 0.5rem 0;
}

document.addEventListener('DOMContentLoaded', () => {
  // hljs-wrap クラスを指定した div 要素（div.hljs-wrap）を全て取得
  const hljsWrappers = document.querySelectorAll('div.hljs-wrap');
  // div.hljs-wrap が1つ以上あれば
  if (hljsWrappers.length > 0) {
    hljsWrappers.forEach((wrapper) => {
      // div.hljs-wrap の子要素の pre 要素を取得
      const pre = wrapper.firstElementChild;
      // pre 要素が存在しなければ終了
      if (!pre) { return; }
      // pre 要素に data-label 属性が設定されていなければ終了
      if (!pre.hasAttribute('data-label')) { return; }
      // data-label 属性の値を取得
      const label = pre.getAttribute('data-label');
      // 表示する要素の初期化
      let element;
      // data-label-url が設定されていればリンクを作成
      if (pre.hasAttribute('data-label-url')) {
        element = document.createElement('a');
        element.href = pre.getAttribute('data-label-url');
        element.classList.add('hljs-label-url')
      } else {
        // data-label-url がなければ span 要素を作成
        element = document.createElement('span');
        element.classList.add('hljs-label');
      }
      // 表示する要素のテキスト（ラベル）に data-label 属性の値を設定
      element.textContent = label;
      wrapper.appendChild(element);
    });
  }
});

.hljs-wrap .hljs-label, .hljs-wrap .hljs-label-url {
  position: absolute;
  top: -2rem;
  left: 0;
  color: #999;
  display: inline-block;
  padding: 0.5rem 0;
}

.hljs-wrap .hljs-label-url {
  color:#3987C7;
  text-decoration: none;
}

.hljs-wrap .hljs-label-url:hover {
  color:#55924f;
}

<div class="hljs-wrap">
  <pre data-label="ラベル" data-label-url="#"><code>...</code></pre>
</div>

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    // result の language プロパティが undefined でなければ
    if(result.language) {
      // language を result から取得して code 要素（el）の data-language 属性に設定
      el.dataset.language = result.language;
    }
  }
});

<div class="hljs-wrap"> <!-- div 要素でラップ -->
  <pre><code class="language-html">...</code></pre>
</div>

.hljs-wrap {
  position: relative; /* 絶対配置の基準 */
}

.hljs-wrap code[data-language]::before {
  content: attr(data-language);
  position:absolute;
  top: 0;
  right: 0;
  color: #ccc;
  display: inline-block;
  padding: 0.5rem;
}

.hljs-wrap code[data-language] {
  padding-top: 2rem;
}

<div class="hljs-wrap"><!-- div 要素でラップ -->
  <!-- code 要素に data-file 属性を設定 -->
  <pre><code data-file="bar.css">...</code></pre>
</div>

.hljs-wrap {
  position: relative; /* 絶対配置の基準 */
}

code[data-file]::after {
  content: attr(data-file);
  position:absolute;
  top: -2rem;
  left: 0;
  color: #999;
  display: inline-block;
  padding: 0.5rem 0;
}

<div class="hljs-wrap"><!-- div 要素でラップ -->
  <!-- pre 要素に data-file 属性を設定 -->
  <pre data-file="bar.css"><code>...</code></pre>
</div>

<div class="hljs-wrap" data-file="bar.css"><!-- div 要素（ラッパー）に data-file 属性を設定 -->
  <pre><code>...</code></pre>
</div>

.hljs-wrap[data-file]::before {
  content: attr(data-file);
  position: absolute;
  top: -2.25rem;
  left: 0;
  color: #eee;
  display: inline-block;
  padding: 0.25rem;
  background-color: #556a94;
  width: 100%; /* 幅いっぱいに背景色を適用 */
}

.hljs-wrap[data-file] {
  margin-top: 4rem;
}

hljs.addPlugin({
  'after:highlightElement': ({ el, result, text }) => {
    // コピーボタンの処理
    const copyButton = document.createElement('button');
    // ボタンにスタイルを適用できるようにクラス属性を指定
    copyButton.setAttribute('class', 'hljs-copy-btn');
    // ボタンのラベル（テキスト）
    copyButton.textContent = 'Copy';
    // 作成したボタンを pre 要素（el.parentElement）の後に追加
    el.parentElement.after(copyButton);
    // 作成したボタンにクリックイベントのリスナーを設定
    copyButton.addEventListener('click', () => {
      // copyToClipboard を呼び出してコードのテキストをコピー
      copyToClipboard(copyButton, text)
    });

    // コピー処理の定義
    function copyToClipboard(btn, text) {
      // Clipboard API に対応していないブラウザ
      if (!navigator.clipboard) {
        alert('Sorry, can not copy');
      }
      // Clipboard API の writeText 関数でクリップボードに text をコピー
      navigator.clipboard.writeText(text).then(
        // 成功時の処理
        () => {
          btn.textContent = 'Copied';
          resetCopyBtnText(btn, 1500);
        },
        // 失敗時の処理
        (error) => {
          btn.textContent = 'Failed';
          resetCopyBtnText(btn, 1500);
          console.log(error.message);
        }
      );
    };

    // ボタンのテキストを指定されたミリ秒後にリセットする関数
    function resetCopyBtnText(btn, delay) {
      setTimeout(() => {
        btn.textContent = 'Copy'
      }, delay)
    }
  }
});

.hljs-copy-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(201, 213, 245, 0.1);
  border: none;
  padding: 3px 10px;
  color: #999;
  cursor: pointer;
  transition: color .3s;
}
.hljs-copy-btn:hover {
  color: #eee
}

<div class="hljs-wrap">
  <pre><code data-file="bar.css">...</code></pre>
</div>

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    // 何らかの処理
  }
});

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    el.innerHTML = result.value.replace(/^/gm, '<span class="line-num"></span>');
  }
});

<div class="hljs-wrap">
  <pre><code>...</code></pre>
</div>

/* 起点となる要素でカウントする値を初期化 */
.hljs-wrap pre {
  /* カウンター名（lineNumber）と初期値を指定（初期値が0の場合は省略可能） */
  counter-reset: lineNumber;
  white-space: pre; /* 自動的に行を折り返さない（ pre のデフォルトなので省略可能） */
}

/* カウント対象の要素に擬似要素で counter-increment と content プロパティを指定 */
.hljs-wrap pre span.line-num::before {
  /* カウンター名と増減する値を指定（増減値が1の場合は省略可能） */
  counter-increment: lineNumber;
  /* content プロパティに counter(カウンター名) を指定 */
  content: counter(lineNumber);
  width: 1.5rem;  /* 桁数が増えた場合も想定する必要あり */
  display: inline-block;  /* display: inline の方が良いかも */
  color: #5f9168; /* 行番号の色 */
  border-right: 1px solid #999;
  margin-right: 10px; /* 行番号とコードの余白 */
  padding-right: 5px; /* 必要に応じて */
  text-align: center;
}

.hljs-wrap {
  position: relative; /* 絶対配置の基準 */
}

.hljs-wrap pre {
  counter-reset: lineNumber;
  white-space: pre;
}

/* 行番号を表示するための余白を指定 */
.hljs-wrap pre code {
  padding-left: 3.25rem;
}

/* 絶対配置にして位置や背景色を設定 */
.hljs-wrap pre span.line-num::before {
  counter-increment: lineNumber;
  content: counter(lineNumber);
  min-width: 2.5rem;
  display: inline-block; /* または display: inline （この方が良いかも） */
  color: #777;
  border-right: 1px solid #999;
  margin-right: 10px;
  padding-right: 5px;
  text-align: center;
  position:absolute; /* 絶対配置 */
  left:0;  /* 左寄せ */
  background: #282c34; /* 背景色（テーマに合わせて設定） */
}

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    el.innerHTML = result.value.replace(/^/gm, '<span class="line-num"></span>');
    // 以下を追加
    // pre 要素の親要素 .hljs-wrap（ラッパー）を取得
    const wrapper = el.closest('.hljs-wrap');
    // .hljs-wrap の高さを取得
    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 要素に .hljs-wrap（pre 要素のラッパー）の高さを設定
    borderSpan.style.setProperty('height', wrapperHeight + 'px');
    // ResizeObserver で  .hljs-wrap（ラッパー）のサイズを監視して枠線用の 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 要素に .hljs-wrap（ラッパー）のサイズ変更後の高さを設定
        borderSpan.style.setProperty('height', newHeight + 'px');
      }
    });
    myObserver.observe(wrapper);
  }
});

.hljs-wrap {
  position: relative;
}

.hljs-wrap pre {
  counter-reset: lineNumber;
  white-space: pre-wrap;  /* 行を自動的に折り返す場合 */
}

.hljs-wrap pre code {
  padding-left: 2.75rem;
  padding-bottom: 1.5em;  /* 最後に空行があると行番号部分はみ出すので調整（必要に応じて） */
  position: relative; /* 枠線用の span 要素（.hljs-border-span）の絶対配置の基準に */
}

.hljs-wrap pre span.line-num::before {
  counter-increment: lineNumber;
  content: counter(lineNumber);
  min-width: 2.5rem;
  display: inline-block;  /* または display: inline */
  color: #777;
  text-align: center;
  position: absolute;
  left: 0;
  background: #282c34;
}

/* 枠線用の span 要素 */
.hljs-border-span {
  background-color: transparent;
  width: 2.5rem; /* 行番号（span.line-num::before）の幅と合わせる */
  border-right: 1px solid #999;
  position: absolute;  /* JavaScript で設定しているので省略可能 */
  top: 0;
  left: 0;
}

// body に no-line-num クラスが指定されていれば行番号を表示しない
if (!document.body.classList.contains('no-line-num')) {
  hljs.addPlugin({
    'after:highlightElement': ({ el, result }) => {
      // pre 要素（el.parentElement）に no-line-num クラスが指定されていれば行番号を表示しない
      if (el.parentElement.classList.contains('no-line-num')) return;
      // 各行の先頭に span.line-num を挿入
      el.innerHTML = result.value.replace( /^/gm, '<span class="line-num"></span>');
      const pre = el.parentElement;
      // 開始行番号のオフセットの初期値
      let startNumOffset = 0;
      // pre 要素の data-line-num-start 属性に開始行番号が指定されていれば
      if (pre.hasAttribute('data-line-num-start')) {
        // 開始行番号を取得
        const startNumber = parseInt(pre.getAttribute('data-line-num-start'));
        if (startNumber || startNumber === 0) {
          // CSS の counter-reset プロパティでカウンターの初期値を変更
          pre.style.setProperty('counter-reset', 'lineNumber ' + (startNumber - 1));
          // 開始行番号のオフセットに開始行番号を代入
          startNumOffset = startNumber - 1;
        }
      }
      // 行を折り返しても枠線を途切れないようにする処理
      const wrapper = el.closest('.hljs-wrap');
      if (wrapper) {
        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 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');
          }
        });
        myObserver.observe(wrapper);
      }
      // 行のハイライト
      // pre 要素に data-line-highlight 属性が指定されていていれば
      if (pre.hasAttribute('data-line-highlight')) {
        // data-line-highlight 属性の値（行番号のリスト）を取得
        const targetLines = pre.getAttribute('data-line-highlight');
        // pre 要素に no-highlight-code クラスが指定されているかどうかのフラグ
        const highlightCode = pre.classList.contains('no-highlight-code') ? false : true;
        // pre 要素に no-highlight-number クラスが指定されているかどうかのフラグ
        const highlightNumber = pre.classList.contains('no-highlight-number') ? false : true;
        // 取得した値（行番号のリスト）をカンマで分割して前後の空白文字を除去
        const targets = targetLines.split(',').map((val) => val.trim());
        // targets（配列）の要素（行番号の指定）が１つ以上あれば
        if (targets.length > 0) {
          // el（code 要素）から行番号の要素 .line-num を全て取得
          const lineNumSpan = el.querySelectorAll('.line-num');
          // 行の総数
          const lineLength = lineNumSpan.length;
          // data-line-highlight 属性の値をカンマで分割したそれぞれの値にについて
          targets.forEach((target) => {
            // ハイフン（-）で分割
            const range = target.split('-');
            // ハイフンで指定されている場合
            if (range.length === 2) {
              // 負の値でない場合
              if (range[0] !== '') {
                // それぞれの値を数値に変換して開始番号が設定されていればオフセットの差分を適用
                const start = startNumOffset === 0 ? parseInt(range[0]) : parseInt(range[0]) - startNumOffset;
                const end = startNumOffset === 0 ? parseInt(range[1]) : parseInt(range[1]) - startNumOffset;
                // それぞれの値が数値として変換できれば
                if (start && end) {
                  if (end >= start) {
                    for (let i = start; i <= end; i++) {
                      // 各要素にクラスを追加
                      addClassToSpan(i);
                    }
                  } else {
                    for (let i = end; i <= start; i++) {
                      addClassToSpan(i);
                    }
                  }
                }
              } else { // 負の値の場合
                const negativeNum = (startNumOffset === 0 ? parseInt(range[1]) : parseInt(range[1])) * -1;
                addClassToSpan(negativeNum - startNumOffset);
              }
            } else if (range.length === 1) { // レンジ（ハイフン）指定でない場合
              // 開始番号が指定されていればその値の差分を適用
              addClassToSpan(startNumOffset === 0 ? parseInt(target) : parseInt(target) - startNumOffset);
            }
            // span 要素にクラスを追加する関数
            function addClassToSpan(number) {
              // 値が 0 より大きく且つ .line-num の総数（行数）より小さければ
              if (number > 0 && number <= lineLength) {
                // .no-highlight-code が pre 要素に指定されていなければ
                if (highlightCode) {
                  // コード部分をハイライトする span 要素を作成
                  const highlightSpan = document.createElement('span');
                  highlightSpan.className = 'line-highlight';
                  // 作成した span 要素を行番号の span 要素の後に追加
                  lineNumSpan.item(number - 1).after(highlightSpan);
                }
                // .no-highlight-number が pre 要素に指定されていなければ
                if (highlightNumber) {
                  // .line-num の（値- 1）番目の要素にクラスを追加
                  lineNumSpan.item(number - 1).classList.add('line-num-highlight');
                }
              }
            }
          })
        }
      }
    }
  });
}

.hljs-wrap {
  position: relative;
}

.hljs-wrap pre {
  counter-reset: lineNumber;
  white-space: pre-wrap;  /* 行を自動折返しする場合 */
}

/* no-line-num クラスを指定した場合のスタイルを追加 */
body.no-line-num .hljs-wrap pre code,
.hljs-wrap pre.no-line-num code {
  padding-left: 1em;
}

.hljs-wrap pre code {
  padding-left: 2.75rem;
  padding-bottom: 1.5em;
  position: relative; /* 枠線用の span 要素の絶対配置の基準とする */
}

.hljs-wrap pre span.line-num::before {
  counter-increment: lineNumber;
  content: counter(lineNumber);
  min-width: 2.5rem;
  display: inline-block;
  color: #777;
  text-align: center;
  position: absolute;
  left: 0;
  background: #282c34;
}

.hljs-border-span {
  background-color: transparent;
  width: 2.5rem;
  border-right: 1px solid #999;
  top: 0;
  left: 0;
}

/* 行番号部分のハイライト表示 */
.hljs-wrap pre span.line-num.line-num-highlight::before {
  color: #c2c21a;
  background: rgba(166, 168, 162, 0.225);
}

/* コード部分のハイライト表示（水平方向のグラデーションの例） */
.hljs-wrap .line-highlight {
  position:absolute;
  /* 行番号の幅を左側に確保 */
  left: 2.5rem;
  width: 100%;
  background: linear-gradient(to right, hsla(254, 15%, 51%, 0.15) 50%, hsla(254, 15%, 51%, 0.01));
  /* 高さは環境に応じて調整 */
  height: 1.2rem;
  /* 文字を選択できるように */
  pointer-events: none;
}

<div class="hljs-wrap">
  <pre data-line-highlight="2, 5-7"><code>...</code></pre>
</div>

<?php
$_POST['name'] = 'xxx';
$name = filter_input(INPUT_POST, "name");
?>
<form method="post">
  <input type="text" name="name" value="">
  <input type="submit" >
</form>
<p>name: <?php echo $name;

<div class="hljs-wrap">
  <pre data-line-highlight="2, 5-7" class="no-highlight-code"><code>
  ...
  </code></pre>
</div>

<?php
$_POST['name'] = 'xxx';
$name = filter_input(INPUT_POST, "name");
?>
<form method="post">
  <input type="text" name="name" value="">
  <input type="submit" >
</form>
<p>name: <?php echo $name;

<div class="hljs-wrap">
  <pre data-line-highlight="2, 5-7" class="no-highlight-number"><code>
  ...
  </code></pre>
</div>

<?php
$_POST['name'] = 'xxx';
$name = filter_input(INPUT_POST, "name");
?>
<form method="post">
  <input type="text" name="name" value="">
  <input type="submit" >
</form>
<p>name: <?php echo $name;

<div class="hljs-wrap">
  <pre data-line-highlight="-2, 2-3" data-line-num-start="-3"><code>...</code></pre>
</div>

<?php
$_POST['name'] = 'xxx';
$name = filter_input(INPUT_POST, "name");
?>
<form method="post">
  <input type="text" name="name" value="">
  <input type="submit" >
</form>
<p>name: <?php echo $name;

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    // 垂直方向のスクロール量を代入する変数
    let windowScrollY;
    // pre 要素
    const pre = el.parentElement;
    // pre 要素に data-show-until 属性が指定されていなければ終了
    if (!pre.hasAttribute('data-show-until')) return;
    // el（code 要素）から各行を囲む要素 .line-num を全て取得
    const lineNumSpan = el.querySelectorAll('.line-num');
    // .line-num （行番号）が存在すれば
    if (lineNumSpan.length > 0) {
      // 何行目までを表示するか（整数）
      const dataShowUntil = parseInt(pre.getAttribute('data-show-until'));
      // dataShowUntil が NaN でなく且つコードの行数より小さければ
      if (dataShowUntil && lineNumSpan.length > dataShowUntil) {
        // pre 要素の data-show-until-offset 属性の値を取得して整数に変換
        const showUntilDataOffset = parseInt(pre.getAttribute('data-show-until-offset'));
        // showUntilDataOffset の値が数値であればその値を、そうでなければ 0（または任意のデフォルト値）を heightOffset に
        const heightOffset = showUntilDataOffset ? showUntilDataOffset : 0;
        // 開始行番号のオフセットの初期値
        let startNumOffset = 0;
        // data-line-num-start 属性（開始行番号）が指定されていれば
        if (pre.hasAttribute('data-line-num-start')) {
          const startNumber = parseInt(pre.getAttribute('data-line-num-start'));
          if (startNumber || startNumber === 0) {
            // 指定された値で開始行番号のオフセットを更新
            startNumOffset = startNumber - 1;
          }
        }
        // 何行目からを非表示にするか（整数）
        const hideFrom = dataShowUntil - startNumOffset;
        // 非表示にする行までの高さ（表示する高さ）
        const hideFromOffsetTop = lineNumSpan.item(hideFrom).offsetTop;
        // data-show-until-offset 属性に指定された値を表示する高さに追加
        const collapsedHeight = hideFromOffsetTop + heightOffset;
        // pre 要素の本来の高さ
        const preHeight = pre.offsetHeight;
        // pre 要素の垂直方向のオーバーフローを非表示に
        pre.style.setProperty('overflow-y', 'hidden');
        // pre 要素の高さを非表示部分を除いた高さに変更
        pre.style.setProperty('height', collapsedHeight + 'px');
        // ボタンを作成
        const expandButton = document.createElement('button');
        expandButton.setAttribute('class', 'hljs-expand-btn');
        // data-show-until-label 属性が指定されていればボタンのテキストに（指定がなければ Expand）
        const expandButtonLabel = pre.hasAttribute('data-show-until-label') ? pre.getAttribute('data-show-until-label') : 'Expand';
        expandButton.textContent = expandButtonLabel;
        // data-show-until-label-collapse 属性が指定されていれば縮小時のボタンのテキストに（指定がなければ Collapse）
        const expandButtonLabelCollapse = pre.hasAttribute('data-show-until-label-collapse') ? pre.getAttribute('data-show-until-label-collapse') : 'Collapse';
        // ボタンを pre 要素の後ろに追加
        pre.after(expandButton);
        let isAnimating = false;
        let isExpanded = false;
        // ボタンのクリックイベントに pre 要素の高さを変更するアニメーションを設定
        expandButton.addEventListener('click', () => {
          if (isAnimating === true) {
            return;
          }
          if (!isExpanded) {
            // クリックされた時点での垂直方向のスクロール量を取得
            windowScrollY = window.scrollY
            expandButton.textContent = expandButtonLabelCollapse;
            isAnimating = true;
            const expandPre = pre.animate(
              {
                height: [collapsedHeight + 'px', preHeight + 'px'],
              },
              {
                duration: 300,
                easing: 'ease-in',
                fill: 'forwards',
              }
            );
            expandPre.onfinish = () => {
              isExpanded = true;
              isAnimating = false;
            }
          } else {
            expandButton.textContent = expandButtonLabel;
            isAnimating = true;
            const collapsePre = pre.animate(
              {
                height: [preHeight + 'px', collapsedHeight + 'px'],
              },
              {
                duration: 300,
                easing: 'ease-in',
                fill: 'forwards',
              }
            );
            collapsePre.onfinish = () => {
              isExpanded = false;
              isAnimating = false;
              // scroll クラスが指定されていれば、非表示部分を表示した時点での位置へスクロール
              if (pre.classList.contains('scroll')) {
                if (pre.classList.contains('smooth')) {
                  // smooth クラスが指定されていれば、スムーススクロール
                  window.scroll({ top: windowScrollY, behavior: 'smooth' });
                }else{
                  window.scroll({ top: windowScrollY });
                }
              }
            }
          }
        });
      }
    }
  }
});

.hljs-wrap .hljs-expand-btn {
  position: absolute;
  top: .5rem;
  right: 0;
  height: 2rem;
  text-align: right;
  background-color: rgb(17, 26, 50);
  padding: 2px 4px;
  margin-right: 10px;
  color: #bbb;
  cursor: pointer;
  border: 1px solid #777;
  transition: color .3s;
}

.hljs-wrap .hljs-expand-btn:hover {
  color: #eee
}

.no-hljs-init .hljs-wrap:has(.hljs-expand-btn) {
  padding-top: 3rem;
  background-color: rgb(17, 26, 50);
}

<div class="hljs-wrap">
  <pre data-show-until="4"><code>...</code></pre>
</div>

<?php
$_POST['name'] = 'xxx';
$name = filter_input(INPUT_POST, "name");
?>
<form method="post">
  <input type="text" name="name" value="">
  <input type="submit" >
</form>
<p>name: <?php echo $name;

<div class="hljs-wrap">
  <pre data-show-until="4" data-show-until-offset="10" data-show-until-label="全て表示" data-show-until-label-collapse="縮小"><code>...</code></pre>
</div>

<?php
$_POST['name'] = 'xxx';
$name = filter_input(INPUT_POST, "name");
?>
<form method="post">
  <input type="text" name="name" value="">
  <input type="submit" >
</form>
<p>name: <?php echo $name;

<div class="hljs-wrap">
  <pre data-show-until="25" class="scroll smooth"><code>...
  非常に長いコード
  ...</code></pre>
</div>

// 表示する行数を指定して code 要素に max-height を設定するプラグイン
hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    const pre = el.parentElement;
    if (!pre.hasAttribute('data-max-lines') || pre.hasAttribute('data-show-until')) return;
    const wrapper = pre.parentElement;
    if (!wrapper) return;
    // code 要素に max-height を設定する前のラッパーの高さ
    const wrapperHeight = wrapper.offsetHeight;
    const lineNumSpan = el.querySelectorAll('.line-num');
    if (lineNumSpan.length > 0) {
      // data-max-lines 属性の値（表示する行数）
      const dataMaxLine = parseInt(pre.getAttribute('data-max-lines'));
      if (dataMaxLine && lineNumSpan.length > dataMaxLine) {
        // data-max-lines-offset 属性に指定された値（余分に表示する高さ：ピクセル）
        const dataMaxLineOffset = parseInt(pre.getAttribute('data-max-lines-offset'));
        // 余分に表示する高さ（data-max-lines-offset 属性に指定されていればその値または0）
        const heightOffset = dataMaxLineOffset ? dataMaxLineOffset : 0;
        // data-max-lines に指定された行数分の高さ
        const targetOffsetTop = lineNumSpan.item(dataMaxLine).offsetTop;
        // code 要素のアクティブなスタイル
        const elComputedStyle = window.getComputedStyle(el);
        // code 要素の padding-top
        const elPaddingTop = parseFloat(elComputedStyle.paddingTop);
        // code 要素の padding-bottom
        const elPaddingBottom = parseFloat(elComputedStyle.paddingBottom);
        // 表示する領域の高さ
        const visibleHeight = targetOffsetTop + heightOffset - elPaddingTop - elPaddingBottom;
        // code 要素に max-height を設定
        el.style.setProperty('max-height', visibleHeight + 'px');
        // code 要素のカスタム属性に max-height 設定前のラッパー要素の高さを設定
        el.setAttribute('data-border-span-height', wrapperHeight);
        // 垂直方向のスクロールを有効に（必要に応じて）
        el.style.setProperty('overflow-y', 'scroll');
        // スクロール量
        let scrollAmount = 0;
        // data-scroll-to 属性が指定されている場合
        if (pre.hasAttribute('data-scroll-to')) {
          // data-scroll-to 属性に指定されている値を数値に変換
          const dataScrollTo = parseInt(pre.getAttribute('data-scroll-to'));
          if (dataScrollTo) {
            if(dataScrollTo + dataMaxLine > lineNumSpan.length + 1) {
              console.log('data-scroll-to or data-max-line is not valid')
              return;
            }
            // data-scroll-to 属性に指定されている行（表示する先頭行）のオフセットトップ
            const scrollToOffsetTop = lineNumSpan.item(dataScrollTo - 1).offsetTop;
            // 表示する最後の行のオフセットトップ
            const lastLineRow = lineNumSpan.item(dataScrollTo + dataMaxLine -2).offsetTop;
            // 表示領域の高さを調整する値（必要に応じて変更）
            const heightAdjustAmount = -8;
            el.style.setProperty('max-height', (lastLineRow - scrollToOffsetTop + heightOffset + heightAdjustAmount ) + 'px');
            // スクロール量を調整する値（必要に応じて変更）
            const scrollAdjustAmount = 3;
            // data-scroll-to 属性が指定されている場合のスクロール量
            scrollAmount = scrollToOffsetTop - scrollAdjustAmount;
            el.scroll(0, scrollAmount);
          }
        }
        if (pre.classList.contains('reset-btn')) {
          // スクロール状態をリセットする（最初の位置に戻す）ボタン
          const resetPositionButton = document.createElement('button');
          resetPositionButton.setAttribute('class', 'hljs-reset-position-btn');
          resetPositionButton.textContent = 'リセット';
          pre.after(resetPositionButton);
          resetPositionButton.addEventListener('click', () => {
            el.scroll(0, scrollAmount);
          });
        }
      }
    }
  }
});

// 表示する領域の高さ
let visibleHeight = targetOffsetTop + heightOffset;
if (pre.hasAttribute('data-scroll-to')) {
  visibleHeight = targetOffsetTop + heightOffset - elPaddingTop - elPaddingBottom;
}

// 行番号表示と行のハイライト表示のプラグイン
hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    if (el.parentElement.classList.contains('no-line-num')) return;
    el.innerHTML = result.value.replace( /^/gm, '<span class="line-num"></span>');
    const pre = el.parentElement;
    let startNumOffset = 0;
    if (pre.hasAttribute('data-line-num-start')) {
      const startNumber = parseInt(pre.getAttribute('data-line-num-start'));
      if (startNumber || startNumber === 0) {
        pre.style.setProperty('counter-reset', 'lineNumber ' + (startNumber - 1));
        startNumOffset = startNumber - 1;
      }
    }
    const wrapper = el.closest(wrapperSelector);
    if (wrapper) {
      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 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');
          // 行番号用 span 要素の高さを更新
          if (el.hasAttribute('data-border-span-height')) {
            borderSpan.style.setProperty('height', el.getAttribute('data-border-span-height') + 'px');
          }
        }
      });
      myObserver.observe(wrapper);
    }

    if (pre.hasAttribute('data-line-highlight')) {
      const targetLines = pre.getAttribute('data-line-highlight');
      const highlightCode = pre.classList.contains('no-highlight-code') ? false : true;
      const highlightNumber = pre.classList.contains('no-highlight-number') ? false : true;
      const targets = targetLines.split(',').map((val) => val.trim());
      if (targets.length > 0) {
        const lineNumSpan = el.querySelectorAll('.line-num');
        const lineLength = lineNumSpan.length;
        targets.forEach((target) => {
          const range = target.split('-');
          if (range.length === 2) {
            if (range[0] !== '') {
              const start = startNumOffset === 0 ? parseInt(range[0]) : parseInt(range[0]) - startNumOffset;
              const end = startNumOffset === 0 ? parseInt(range[1]) : parseInt(range[1]) - startNumOffset;
              if (start && end) {
                if (end >= start) {
                  for (let i = start; i <= end; i++) {
                    addClassToSpan(i);
                  }
                } else {
                  for (let i = end; i <= start; i++) {
                    addClassToSpan(i);
                  }
                }
              }
            } else {
              const negativeNum = (startNumOffset === 0 ? parseInt(range[1]) : parseInt(range[1])) * -1;
              addClassToSpan(negativeNum - startNumOffset);
            }
          } else if (range.length === 1) {
            addClassToSpan(startNumOffset === 0 ? parseInt(target) : parseInt(target) - startNumOffset);
          }
          function addClassToSpan(number) {
            if (number > 0 && number <= lineLength) {
              if (highlightCode) {
                const highlightSpan = document.createElement('span');
                highlightSpan.className = 'line-highlight';
                lineNumSpan.item(number - 1).after(highlightSpan);
              }
              if (highlightNumber) {
                lineNumSpan.item(number - 1).classList.add('line-num-highlight');
              }
            }
          }
        })
      }
    }
  }
});

// このページの場合の設定例
hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    const pre = el.parentElement;
    if (!pre.hasAttribute('data-max-lines') || pre.hasAttribute('data-show-until')) return;
    const wrapper = pre.parentElement;
    if (!wrapper) return;
    const wrapperHeight = wrapper.offsetHeight;
    const lineNumSpan = el.querySelectorAll('.line-num');
    if (lineNumSpan.length > 0) {
      const dataMaxLine = parseInt(pre.getAttribute('data-max-lines'));
      if (dataMaxLine && lineNumSpan.length > dataMaxLine) {
        const dataMaxLineOffset = parseInt(pre.getAttribute('data-max-lines-offset'));
        const heightOffset = dataMaxLineOffset ? dataMaxLineOffset : 0;
        const targetOffsetTop = lineNumSpan.item(dataMaxLine).offsetTop;
        const elComputedStyle = window.getComputedStyle(el);
        const elPaddingTop = parseFloat(elComputedStyle.paddingTop);
        const elPaddingBottom = parseFloat(elComputedStyle.paddingBottom);
        //const visibleHeight = targetOffsetTop + heightOffset - elPaddingTop - elPaddingBottom;
        let visibleHeight = targetOffsetTop + heightOffset;
            if (pre.hasAttribute('data-scroll-to')) {
              visibleHeight = targetOffsetTop + heightOffset - elPaddingTop - elPaddingBottom;
            }
        el.style.setProperty('max-height', visibleHeight + 'px');
        el.setAttribute('data-border-span-height', wrapperHeight);
        el.style.setProperty('overflow-y', 'scroll');
        let scrollAmount = 0;
        if (pre.hasAttribute('data-scroll-to')) {
          const dataScrollTo = parseInt(pre.getAttribute('data-scroll-to'));
          if (dataScrollTo) {
            if(dataScrollTo + dataMaxLine > lineNumSpan.length + 1) {
              console.log('data-scroll-to or data-max-line is not valid')
              return;
            }
            const scrollToOffsetTop = lineNumSpan.item(dataScrollTo - 1).offsetTop;
            // const lastLineRow = lineNumSpan.item(dataScrollTo + dataMaxLine -2).offsetTop;
            const lastLineRow = lineNumSpan.item(dataScrollTo + dataMaxLine -1).offsetTop;
            const heightAdjustAmount = 4;
            el.style.setProperty('max-height', (lastLineRow - scrollToOffsetTop + heightOffset + heightAdjustAmount ) + 'px');
            const scrollAdjustAmount = 3;
            scrollAmount = scrollToOffsetTop - scrollAdjustAmount;
            el.scroll(0, scrollAmount);
          }
        }
        if (pre.classList.contains('reset-btn')) {
          const resetPositionButton = document.createElement('button');
          resetPositionButton.setAttribute('class', 'hljs-reset-position-btn');
          resetPositionButton.textContent = 'リセット';
          pre.after(resetPositionButton);
          resetPositionButton.addEventListener('click', () => {
            el.scroll(0, scrollAmount);
          });
        }
      }
    }
  }
});

 📁 twentytwentyfour
  ├──📁 assets
  ├── functions.php
  ├──📁 parts
  ├──📁 patterns
  ├── readme.txt
  ├── screenshot.png
  ├── style.css （必須）
  ├──📁 styles
  ├──📁 templates
  │   ├── 404.html
  │   ├── archive.html
  │   ├── home.html
  │   ├── index.html （必須）
  │   ├── page-no-title.html
  │   ├── page-wide.html
  │   ├── page-with-sidebar.html
  │   ├── page.html
  │   ├── search.html
  │   ├── single-with-sidebar.html
  │   └── single.html
  └── theme.json

<div class="hljs-wrap">
  <pre class="lineNumber" data-set-color-text="（必須）, theme.json" data-set-color="pink, #b3e2c0"><code class="language-plaintext"> &#x1f4c1; twentytwentyfour
  ├──&#x1f4c1; assets
  ├── functions.php
  ├──&#x1f4c1; parts
  ├──&#x1f4c1; patterns
  ├── readme.txt
  ├── screenshot.png
  ├── style.css （必須）
  ├──&#x1f4c1; styles
  ├──&#x1f4c1; templates
  │   ├── 404.html
  │   ├── archive.html
  │   ├── home.html
  │   ├── index.html （必須）
  │   ├── page-no-title.html
  │   ├── page-wide.html
  │   ├── page-with-sidebar.html
  │   ├── page.html
  │   ├── search.html
  │   ├── single-with-sidebar.html
  │   └── single.html
  └── theme.json</code></pre>
</div>

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    const pre = el.parentElement;
    if (pre.hasAttribute('data-set-color') && pre.hasAttribute('data-set-color-text')) {
      const colors = pre.getAttribute('data-set-color').split(',');
      const targetTexts = pre.getAttribute('data-set-color-text').split(',');
      let targetTextsRegEx = '';
      // キーに対象の文字列（data-set-color-text）、値に色の文字列（data-set-color）のプロパティを持つオブジェクトの初期化
      let textColorMap = {};
      for (let i = 0; i < targetTexts.length; i++) {
        // 対象の文字列の正規表現を作成するための文字列（値にメタ文字が含まれていれば \ でエスケープ）
        const targetText = targetTexts[i].trim().replace(/[\^\$\*\+\?\=\!\:\|\\\/\(\)\[\]\{\}]/g, (match) => {
          return '\\' + match;
        });
        // 対象の文字列に span、class=、<、>、hljs- が含まれている場合は終了
        const illegalPattern = /span|^class=?.*$|<|>|&|'|"|hljs|attr|function|num|title|comment|string|keyword|property|number|built_in|variable|language|line|params|literal/i;
        if(illegalPattern.test(targetText)) {
          console.log('data-set-color-text に指定された文字は無効です');
          return;
        }
        if(targetText) {
          if(i === 0) {
            targetTextsRegEx =  targetText;
          }else{
            targetTextsRegEx = targetTextsRegEx + '|' + targetText;
          }
          // colorMap オブジェクトのプロパティのキー（メタ文字をエスケープするために追加した \\ を除去）
          const keyVal = targetText.replace(/\\(.)/g, (match, p1) => {
            // エスケープ文字を除去してメタ文字のみに置換（返す）
            return p1;
          });
          // キーに対象の文字列（エスケープ \ を削除した値 keyVal）、値に色の文字列（colors[i]）のプロパティを textColorMap に追加
          textColorMap[keyVal] = colors[i] ? colors[i].trim() : colors[0].trim();
        }
      }
      // 対象の文字列の正規表現
      targetTextsRegEx = new RegExp(targetTextsRegEx, 'g');
      el.innerHTML = el.innerHTML.replace(targetTextsRegEx, (match) => {
        // [] を使って対応するキー（match）の値にアクセスして返す
        return `<span style="color: ${textColorMap[match]}">${match}</span>`;
      });
    }
  }
});

// ラッパー要素にアコーディオンアニメーションの開閉パネルを追加する関数の定義
function addAccordionPanel(targetSelector, accordionClassName) {
  // アコーディオンパネルを開くボタンのテキスト
  const summaryOpenText = "コードを表示";
  // アコーディオンパネルを閉じるボタンのテキスト
  const summaryCloseText = "コードを閉じる";
  // details 要素に付与するクラス
  const detailsClass='code';
  // details 要素内のコンテンツを格納する div 要素に付与するクラス
  const detailsContentClass='details-content';
  // details 要素内のコンテンツを格納する要素のラッパーに付与するクラス
  const detailsContentWrapperClass='details-content-wrapper';
  // 対象の要素を取得
  const targetElems = document.getElementsByClassName(targetSelector);
  for (const elem of targetElems)  {
    const pre = elem.querySelector('pre');
    // pre 要素に accordionClassName（'accordion'）が指定されていれば
    if(pre && pre.classList.contains(accordionClassName)) {
      // details 要素を作成
      const details = document.createElement('details');
      details.classList.add(detailsClass);
      // 作成した details 要素の HTML（summary 要素と div 要素）を設定
      details.innerHTML = `<summary data-close-text="${summaryCloseText}">${summaryOpenText}</summary>
      <div class="${detailsContentWrapperClass}">
        <div class="${detailsContentClass}"></div>
      </div>`;
      // コードブロックのラッパー要素を details 要素でラップする
      elem.insertAdjacentElement('beforebegin', details);
      details.querySelector('.' + detailsContentClass).appendChild(elem);
    }
  }
}

// アコーディオンアニメーションの開閉パネルを追加する関数の呼び出し
addAccordionPanel('hljs-wrap', 'accordion');

// コード全体を表示・非表示するアコーディオンアニメーションの呼び出し
setupToggleDetailsAnimation();
              

if(pre && pre.classList.contains(accordionClassName)) {
  // コードブロックのラッパー要素を details 要素でラップ（この方法ではコードブロックのイベントリスナーが削除される）
  elem.outerHTML =  `<details class="${detailsClass}">
    <summary data-close-text="${summaryCloseText}">${summaryOpenText}</summary>
    <div class="${detailsContentWrapperClass}">
      <div class="${detailsContentClass}">${elem.outerHTML}</div>
    </div>
  </details>`;
}