vue.js - 没有在 Nuxt + Vue 项目中加载 Markdown 样式

Question

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

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

例如：

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

不知道这里有什么问题。如果需要更多详细信息，请告诉我。

Answer 1

由于tailwind.css 中的tailwind.css，h1 - h6 标题不起作用。

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

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

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

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

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

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

Answer 2

解决方案是使用 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类添加到显示降价的元素中。

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

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