没有在 Nuxt + Vue 项目中加载 Markdown 样式答案

【问题标题】：Markdown styles not getting loaded in Nuxt + Vue project没有在 Nuxt + Vue 项目中加载 Markdown 样式
【发布时间】：2021-12-04 04:10:54
【问题描述】：

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

问题是“标题”和“链接”等一些样式可以正常加载，而“粗体”、“斜体”等一些基本样式可以正常加载。

例如：

不确定问题出在哪里。如果需要更多详细信息，请告诉我。

【问题讨论】：

【解决方案1】：

这是因为 tailwind.css 在顺风中，h1 - h6 标题不起作用。

选项 1) 将此添加到您的tailwind.config.js：

module.exports = {
  corePlugins: {
    preflight: false,
  },
....
}

选项 2）尝试在 css 文件中为 h1..h6 添加自定义 CSS。

类似地尝试为其他问题添加自定义 css。

【讨论】：

选项 1 不起作用，因为它将删除所有核心插件..
如果你检查你的降价输出，由于同样的原因，链接不会是蓝色的..
对于link css a:link { color: blue !important; background-color: transparent; text-decoration: none; }
感谢 Kaartik。添加自定义 CSS 是可行的，但我想知道是否有更简单的方法可以做到这一点。例如，列表在这里也不起作用。

【解决方案2】：

解决方案是使用 Tailwind CSS 的 typography 插件。

以下是要遵循的步骤：

先安装插件。

npm install @tailwindcss/typography

yarn add @tailwindcss/typography.

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

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

然后将prose 类添加到要显示降价的元素中。

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

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

【讨论】：