test/fixtures/single-md/output.html

<head><style>
.rehype-code-group {
  display: grid;
  gap: 0.6rem;
}
.rcg-tab-container {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.rcg-tab {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  background: none;
  &.active {
    border-bottom: 2px solid;
    font-weight: bold;
  }
}
.rcg-block {
  display: none;
  overflow-x: auto;
  &.active {
    display: block;
  }
}
</style><script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
  const codeGroups = document.querySelectorAll(".rehype-code-group");

  codeGroups.forEach((group) => {
    const tabs = group.querySelectorAll(".rcg-tab");
    const blocks = group.querySelectorAll(".rcg-block");
    let activeTab = group.querySelector(".rcg-tab.active");
    let activeBlock = group.querySelector(".rcg-block.active");

    group.addEventListener("click", (event) => {
      const tab = event.target.closest(".rcg-tab");
      if (!tab) return;

      const index = Array.from(tabs).indexOf(tab);
      if (index === -1) return;

      if (activeTab) {
        activeTab.classList.remove("active");
        activeTab.setAttribute("aria-selected", "false");
      }
       if (activeBlock) {
        activeBlock.classList.remove("active");
        activeBlock.setAttribute("hidden", "true");
      }

      tab.classList.add("active");
      tab.setAttribute("aria-selected", "true");
      blocks[index].classList.add("active");
      blocks[index].removeAttribute("hidden");

      activeTab = tab;
      activeBlock = blocks[index];
    });
  });
});
</script></head><div class="rehype-code-group"><div class="rcg-tab-container" role="tablist"><button class="rcg-tab active" role="tab" aria-selected="true" aria-controls="rcg-5-block-0" id="rcg-5-tab-0">npm</button><button class="rcg-tab" role="tab" aria-selected="false" aria-controls="rcg-5-block-1" id="rcg-5-tab-1">pnpm</button><button class="rcg-tab" role="tab" aria-selected="false" aria-controls="rcg-5-block-2" id="rcg-5-tab-2">yarn</button></div><div class="rcg-block active" role="tabpanel" aria-labelledby="rcg-5-tab-0" id="rcg-5-block-0"><pre><code class="language-bash">npm install rehype-code-group
</code></pre></div><div class="rcg-block" role="tabpanel" aria-labelledby="rcg-5-tab-1" id="rcg-5-block-1" hidden><pre><code class="language-bash">pnpm add rehype-code-group
</code></pre></div><div class="rcg-block" role="tabpanel" aria-labelledby="rcg-5-tab-2" id="rcg-5-block-2" hidden><pre><code class="language-bash">yarn add rehype-code-group
</code></pre></div></div>