Create Tabs for prose code

[dbzx10299]

I have a question and I have been running into some issues, I created a custom prose code component and I was not able to achieve the result I was looking for so I created a CodeDisplay component.

The internals look like this for CodeDisplay

<script setup>
import { useClipboard } from '@vueuse/core'
const { text, copy, copied } = useClipboard()

const props = defineProps({
  currentLanguage: {
    type: String
  },
  languages: {
    type: Array
  }
})
</script>

<template>
  <div class="code-wrapper">
    <div class="tabs"></div>

    <template v-for="language in languages">
      <slot :name="language" v-if="language === currentLanguage" />
    </template>

  </div>
</template>

and in a markdown file:

  ::CodeDisplay{:languages='["Javascript", "Typescript"]' currentLanguage="Javascript"}
    #Javascript
    ```js
    const foo = 'foo'
    ```
  
    #Typescript
    ```ts
    const bar: string = 'bar'
    ```
  ::

I don't know how to get the copy method hooked up to this. In each named slot, a prose code component is being set, and I can't seem to figure out how to pass up code from ProseCode so it can be copied. I think I need a whole new implementation but I am really struggling on this one. Any help would be greatly appreciated

[nobkd]

Nuxt Themes Typography Module overrides prose code and adds a copy button to the generated code block.

• <ProseCode> override code
• <ProseCodeCopyButton> code

---

Nuxt Themes Elements implements a code group element, but hasn't open sourced the code (yet).
If you're interested about the implementation, you could install it to a project and look inside the node_modules folder: node_modules/@nuxt-themes/elements/components/globals/CodeGroup.vue.

---

You could look into those code pieces and implement your own variant.
Or maybe this was/were the package(s) you were looking for.

As far as I could see, you were looking for a code group. Even if this wasn't the case, I hope, that this still helps.