Skip to content

Add support for a copy button #58

@Rednas83

Description

@Rednas83

Something like
<Shiki lang="ts" :code="code" copy-button />

To return something like
Image

Workaround

<script setup lang='ts'>
const code = "sum([1,2,3]) => 6"
const copied = ref(false)
const copy = async () => {
  try {
    await navigator.clipboard.writeText(String(code.value.split(' => ')[0]))
    copied.value = true
    setTimeout(() => { copied.value = false }, 1200)
  } catch (error) {
    console.error("Copy failed", error)
  }
}
</script>

<template>
  <div class="relative">
    <Shiki lang="ts" :code="code" />
    <UButton v-if="selected" size="sm" variant="soft" color="neutral" class="a-6" @click="copy">
      {{ copied ? 'copied' : 'copy' }}
    </UButton>
  </div>
</template>

<style>
.a-6 {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
}
</style>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions