-
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 The internals look like this for <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:
I don't know how to get the |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Nuxt Themes Typography Module overrides prose code and adds a copy button to the generated code block. Nuxt Themes Elements implements a code group element, but hasn't open sourced the code (yet). You could look into those code pieces and implement your own variant. 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. |
Beta Was this translation helpful? Give feedback.
Nuxt Themes Typography Module overrides prose code and adds a copy button to the generated code block.
<ProseCode>
override code<ProseCodeCopyButton>
codeNuxt 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.