test how to display the content of the tabs and switch from one tab to the other

[Trophime]

Hi, I wonder why the content of the tabs is not displayed? And similarly, I cannot switch from one tab to the other either in firefox and chromium?

Thanks for your comments Best

[hunghg255]

@Trophime maybe you should add js switch tab

[hunghg255]

 if (document) {
        const eleCodeGroups = document.querySelectorAll('.markdown-code-group');

        const removeCodeBlockClass = (el: any) => {
          const codeBlocks = el.querySelectorAll('.code-blocks-group');
          codeBlocks.forEach((el: any) => {
            el.classList.remove('active');
          });
        };

        const removeTabClass = (el: any) => {
          const codeBlocks = el.querySelectorAll('.markdown-group-tab-item');
          codeBlocks.forEach((el: any) => {
            el.classList.remove('active');
          });
        };

        const initCodeGroupActive = (el: any) => {
          const tabActive = el.querySelector('.markdown-group-tab-item.active');
          const dataCodeGroupActive = tabActive?.dataset.codeGroup;

          const codeActive = el.querySelector(`.code-blocks-group.${dataCodeGroupActive}`);

          if (codeActive) {
            codeActive.classList.add('active');
          }
        };

        if (eleCodeGroups?.length) {
          eleCodeGroups.forEach((el: any) => {
            const btns = el.querySelectorAll('.markdown-group-tab-item');

            initCodeGroupActive(el);

            btns.forEach((btn: any) => {
              btn.addEventListener('click', () => {
                const dataCodeGroup = btn.dataset.codeGroup;

                removeCodeBlockClass(el);
                removeTabClass(el);

                const code = el.querySelector(`.code-blocks-group.${dataCodeGroup}`);
                code.classList.add('active');
                btn.classList.add('active');
              });
            });
          });
        }
      }

[Trophime]

Could you please comment your post? I'm not familiar with js I would like to use your package for tab support in slidev

[hunghg255]

Could you please comment your post? I'm not familiar with js I would like to use your package for tab support in slidev

Im not try slidev, you can create a mini repo, I will try debug help you

[Trophime]

Ok thanks. I'd first like to have something like that: https://sli.dev/features/frontmatter-merging The corresponding "source" file is here: https://github.com/slidevjs/slidev/blob/main/docs/features/frontmatter-merging.md?plain=1

How can I generate the same "page" (I mean only the "text" not the top and right menu) with your package?

[hunghg255]

maybe slidev used to a plugin to group code. you can try find a config On Thu, 12 Sep 2024 at 20:53 Trophime @.***> wrote:

Ok thanks. I'd first like to have something like that: https://sli.dev/features/frontmatter-merging The corresponding "source" file is here: https://github.com/slidevjs/slidev/blob/main/docs/features/frontmatter-merging.md?plain=1

How can I generate the same "page" (I mean only the "text" not the top and right menu) with your package?

— Reply to this email directly, view it on GitHub https://github.com/hunghg255/markdown-it-code-group/issues/1#issuecomment-2346355456, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKBFSDFYVNLJIAWQGWUQOVDZWGMHJAVCNFSM6AAAAABODHSDN6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNBWGM2TKNBVGY . You are receiving this because you commented.Message ID: @.***>

[Trophime]

the slidev plugin is not working see https://github.com/slidevjs/slidev/issues/1865 That's why, I've started to play with your package.

[Trophime]

I wish to reproduce: I got: with this simple md:

Slidev test

:::code-group-open

---
src
background
class
---

---
src
**background**
class
---

:::code-group-close

[hunghg255]

@Trophime I think we can not use code group on slidev, because it parsed to vue component, it builtin on slidev

https://github.com/slidevjs/slidev/blob/main/packages/client/builtin/CodeBlockWrapper.vue

[Trophime]

If I got it correctly, slidev uses markdown-it-mdc for md rendering But actually markdown-it-mdc does not support code-group code-group syntax come from https://github.com/nuxt/content/blob/b429b1810ba90dad557aa6392c18c0c9b2cc51a3/docs/content/2.usage/2.markdown.md?plain=1#L127C1-L150C1

but that's all I can tell I don't understand what going on when trying to render md Sorry