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

Question

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

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

例如：

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

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

Answer 1

这是因为 tailwind.css 在顺风中，h1 - h6 headers 不工作。

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

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

来源：https://github.com/tailwindlabs/tailwindcss/issues/1460

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

https://www.w3schools.com/tags/tag_hn.asp 从这里复制样式

同样尝试为其他问题添加自定义 css。

Answer 2

这个问题的解决方案是使用 Tailwind CSS 的 typography 插件。

以下是要遵循的步骤：

先安装插件。

使用 npm

npm install @tailwindcss/typography

使用纱线

yarn add @tailwindcss/typography.

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

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

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

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

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