Nuxt Content で作ってるブログにある、コードブロックの内容をコピーできるボタンを用意した

<template lang="pug">  slot</template><style lang="scss">pre code .line {  display: block;  min-height: 1rem;}</style>

<template lang="pug">  div.code-block    slot    button(@click="onClick")</template><script lang="ts">import { useClipboard } from '@vueuse/core';const props = defineProps({  code: {    type: String,    default: ''  },})const { copy } = useClipboard();const onClick = () => {  copy(props.code)}</script><style lang="scss">  .code-block {    pre {      padding-top: 2.1111111em !important;      code .line {        display: block;        min-height: 1rem;      }    }  }</s>

<template lang="pug">div.code-block.relative  span(    v-if="filename"    class="absolute top-0 py-2 px-4 text-xs text-gray-100 bg-zinc-500 dark:bg-gray-800 rounded-br-lg"  ) {{ filename }}  span(    v-else-if="language"    class="absolute top-0 py-2 px-4 text-xs text-gray-100 bg-zinc-500 dark:bg-gray-800 rounded-br-lg"  ) {{ language }}  slot  label(    class="absolute top-0 right-4 normal-case btn btn-ghost rounded-btn hover:text-rose-600  dark:hover:text-sky-300 hover:bg-inherit"    ref='btn'    @click="onClick"  )    span.mr-2(v-if="copied") Copied code!    span.mr-2(v-else-if="isHovered") Copy    font-awesome-icon(icon="copy" v-element-hover="onHover")</template><script setup lang="ts">import { useClipboard } from '@vueuse/core';import { vElementHover } from "@vueuse/components"const props = defineProps({  code: {    type: String,    default: ''  },  language: {    type: String,    default: ''  },  filename: {    type: String,    default: ''  }})const isHovered = ref(false)function onHover(state: boolean) {  isHovered.value = state}const { copy, copied } = useClipboard();const onClick = () => {  copy(props.code)}</script><style lang="scss">  .code-block {    pre {      padding-top: 2.1111111em !important;      code .line {        display: block;        min-height: 1rem;      }    }  }</style>

```language{number[]}[filename]// JavaScript のコード```

````md
```js
```
````