使用nuxt3+tailwindcss4+@nuxt/content3在页面渲染 markdown 文档

nuxt3+tailwindcss在页面渲染 markdown 文档

页面效果

依赖

“@nuxt/content”: “^3.4.0”
“tailwindcss”: “^4.0.10”
“nuxt”: “^3.16.2”
“@tailwindcss/vite”: “^4.0.10”
@tailwindcss/typography (这个是格式化 md 样式用的)

注意：

这里nuxt/content 版本是 3xx
所以需要使用ContentRenderer

<script setup>
const slug = useRoute().params.slug;
const { data: post } = await useAsyncData(`blog-${slug}`, () => {
  return queryCollection("blog").path(`/blog/${slug}`).first();
});
</script>

<template>
  <div class="min-h-screen">
    <div class="max-w-4xl mx-auto">
      <article class="prose lg:prose-xl px-5">
        <ContentRenderer :value="post" />
        <!-- <div v-html="content"></div> -->
      </article>
    </div>
  </div>
</template>

2. 配置 nuxt.config.ts 如下图 3 个地方
3. 
   在 main .css文件中配置 tailwindcss 插件，其中 @tailwindcss/typography 就是格式化 md 文档的，nuxt3 是这样配置和

@import "tailwindcss";
@plugin "@tailwindcss/typography";

用 article 包裹 ，并给 article 添加 css,如下：

<article class="prose lg:prose-xl px-5">
       <!--读取 nuxt 工程目录中的 .md -->
        <ContentRenderer :value="post" />
        <!-- 或下面方式,后端返回的md -->
        <!-- <div v-html="content"></div> -->
</article>