Nuxt + Vue 项目中未加载 Markdown 样式

Question

我正在开发一个 Vue + Nuxt + Tailwind 项目，并使用标记库将文本转换为 Markdown。

问题是，某些样式（例如“标题”和“链接”）可以正确加载，而某些基本样式（例如“粗体”、“斜体”）则可以正常加载。

例如：

• 当我使用“*hello* world”时，它会转换为“ hello world”。
• 当我使用“#hello world”时，它不会增加文本的大小。
• 当我使用“[google]( https://google.com )”时，它确实创建了一个链接，但该链接不是蓝色的。

不确定这里的问题是什么。如果需要更多详细信息，请告诉我。

Answer 1

解决这个问题的方法是使用 Tailwind CSS 的版式插件。

以下是应遵循的步骤：

首先安装插件。

使用 npm

npm install @tailwindcss/typography

使用纱线

yarn add @tailwindcss/typography。

然后将插件添加到您的tailwind.config.js文件中：

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

然后将该prose类添加到要显示 Markdown 的元素。

<div class="prose" v-html="cleanedMarkdown"></div>。

这提供了降价所需的格式。