客製化 Prose 等 UI 元件

<!-- app/components/content/ProsePre.vue -->
<template>
<div class="relative">
  <!-- Copy 按鈕 -->
  <button
    @click="copyToClipboard"
    class="absolute top-2 right-2 bg-gray-800 text-white text-xs px-2 py-1 rounded hover:bg-gray-700 transition"
  >
    {{ copied ? "✔ Copied!" : "Copy" }}
  </button>
  <!-- 顯示檔名 -->
  <div
    v-if="$props.filename"
    class="bg-slate-200 font-mono text-sm border
           border-slate-300 py-2 px-3 rounded-t-md text-black"
  >
    {{ $props.filename }}
  </div>
  <pre
    :class="{
      [$props.class as string]: true,
      'mt-0 rounded-t-none': $props.filename,
    }"
  ><slot /></pre>
</div>
</template>

<script setup lang="ts">
defineProps({
  code: {
    type: String,
    default: '',
  },
  language: {
    type: String,
    default: null,
  },
  filename: {
    type: String,
    default: null,
  },
  highlights: {
    type: Array as () => number[],
    default: () => [],
  },
  meta: {
    type: String,
    default: null,
  },
  class: {
    type: String,
    default: null,
  },
});

const copied = ref(false);
const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(props.code);
    copied.value = true;
    setTimeout(() => (copied.value = false), 3000); // 3秒後恢復
  } catch (error) {
    console.error("複製失敗", error);
  }
};
</script>

<style>
pre code .line {
  display: block;
}
</style>

> 這裡是顯示 blockquote 的原始碼，會有前後會有引號。

module.exports = {
  "theme": { 
    "extend": {
      "typography": {
        "no-quotes": {
          css: {
            'blockquote p:first-of-type::before': { content: 'none' },
            'blockquote p:last-of-type::after': { content: 'none' },
          },
        },
      }
    }
  }
}

<script setup>
// app/pages/[...slug].vue
const route = useRoute();
const { data: article } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})
</script>
<template>
    <ContentRenderer :value="article" class="prose prose-no-quotes">
      <template #empty>
        <p>No content found.</p>
      </template>        
    </ContentRenderer>
</template>

<template>
  <p><slot /></p>
</template>

<template>
  <component
    :is="ImageComponent"
    :src="refinedSrc"
    :alt="props.alt"
    :width="props.width"
    :height="props.height"
  />
</template>

<script setup lang="ts">
import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
import { useRuntimeConfig, computed } from '#imports'

import ImageComponent from '#build/mdc-image-component.mjs'

const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  alt: {
    type: String,
    default: ''
  },
  width: {
    type: [String, Number],
    default: undefined
  },
  height: {
    type: [String, Number],
    default: undefined
  }
})

const refinedSrc = computed(() => {
  if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
    if (_base !== '/' && !props.src.startsWith(_base)) {
      return joinURL(_base, props.src)
    }
  }
  return props.src
})
</script>

<template>
  <h1 :id="props.id">
    <a
      v-if="generate"
      :href="`#${props.id}`"
    >
      <slot />
    </a>
    <slot v-else />
  </h1>
</template>

<script setup lang="ts">
import { computed, useRuntimeConfig } from '#imports'

const props = defineProps<{ id?: string }>()

const { headings } = useRuntimeConfig().public.mdc
const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)))
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  // 其他設定
  future: { compatibilityVersion: 4 },
  modules: ['@nuxt/content'],
  content: {
    build: {
      markdown: {
        mdc: true,
        highlight: {
          // Theme used in all color schemes.
          theme: 'github-dark',
        }
      }
    }
  }
  // 其他設定
})

<template>
<div class="card max-w-7xl p-4 dark:bg-gray-900">
    <!-- 自訂 Markdown Slot -->
    <ContentRenderer :value="article" class="prose">
      <template #empty>
        <p>No content found.</p>
      </template>

      <!-- 攔截 <pre> 來加入 Copy 按鈕 -->
      <template #pre="{ children }">
        <CopyableCode :code="children[0].children[0].value" />
      </template>
      
    </ContentRenderer>
</div>
</template>