Vue Experiments

Code.vue

<script setup lang="ts">
import { Shiki } from '#components';
import { getSliceComponentProps } from '#imports';
import type { Content } from '@prismicio/client';

const { slice } = defineProps(getSliceComponentProps<Content.CodeSlice>());
</script>

<template>
  <section :data-slice-type="slice.slice_type" :data-slice-variation="slice.variation" class="w-full">
    <div class="rounded-4xl w-full bg-[#fff] p-8 text-sm dark:bg-[#24292e]">
      <p>
        {{ slice.primary.filename }}
      </p>
      <Shiki
        v-if="slice.primary.code[0] != null"
        :lang="slice.primary.language"
        :code="slice.primary.code[0].text"
        :highlight-options="{ themes: { light: 'github-light', dark: 'github-dark' } }"
        class="w-full overflow-x-auto"
      />
    </div>
  </section>
</template>