From 82d6aeec5ca87dc28c60c5009127aa8ef5f29d9a Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 15 Feb 2025 22:36:49 +0530
Subject: [PATCH] fix: ids of code groups shouldn't change b/w builds if
 content hasn't changed

---
 src/node/markdown/plugins/containers.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts
index bbed26ae..03be3abc 100644
--- a/src/node/markdown/plugins/containers.ts
+++ b/src/node/markdown/plugins/containers.ts
@@ -2,9 +2,7 @@ import type MarkdownIt from 'markdown-it'
 import container from 'markdown-it-container'
 import type { RenderRule } from 'markdown-it/lib/renderer.mjs'
 import type Token from 'markdown-it/lib/token.mjs'
-import { nanoid } from 'nanoid'
 import type { MarkdownEnv } from '../../shared'
-
 import {
   extractTitle,
   getAdaptiveThemeMarker,
@@ -86,7 +84,6 @@ function createCodeGroup(options: Options, md: MarkdownIt): ContainerArgs {
     {
       render(tokens, idx) {
         if (tokens[idx].nesting === 1) {
-          const name = nanoid(5)
           let tabs = ''
           let checked = 'checked'
 
@@ -110,8 +107,7 @@ function createCodeGroup(options: Options, md: MarkdownIt): ContainerArgs {
               )
 
               if (title) {
-                const id = nanoid(7)
-                tabs += `<input type="radio" name="group-${name}" id="tab-${id}" ${checked}><label data-title="${md.utils.escapeHtml(title)}" for="tab-${id}">${title}</label>`
+                tabs += `<input type="radio" name="group-${idx}" id="tab-${i}" ${checked}><label data-title="${md.utils.escapeHtml(title)}" for="tab-${i}">${title}</label>`
 
                 if (checked && !isHtml) tokens[i].info += ' active'
                 checked = ''
@@ -119,9 +115,7 @@ function createCodeGroup(options: Options, md: MarkdownIt): ContainerArgs {
             }
           }
 
-          return `<div class="vp-code-group${getAdaptiveThemeMarker(
-            options
-          )}"><div class="tabs">${tabs}</div><div class="blocks">\n`
+          return `<div class="vp-code-group${getAdaptiveThemeMarker(options)}"><div class="tabs">${tabs}</div><div class="blocks">\n`
         }
         return `</div></div>\n`
       }