马来西亚服务器租用_品牌宣传方式_室内设计网站_淘宝数据分析

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>