没有在 Nuxt + Vue 项目中加载 Markdown 样式
Posted
技术标签:
【中文标题】没有在 Nuxt + Vue 项目中加载 Markdown 样式【英文标题】:Markdown styles not getting loaded in Nuxt + Vue project 【发布时间】:2021-12-04 04:10:54 【问题描述】:我正在开发一个 Vue + Nuxt + Tailwind 项目,并使用 marked 库将文本转换为 Markdown。
问题是“标题”和“链接”等一些样式可以正常加载,而“粗体”、“斜体”等一些基本样式可以正常加载。
例如:
当我使用“*hello* world”时,它会转换为“hello world”。 当我使用“# hello world”时,它不会增加文本的大小。 当我使用“[google](https://google.com)”时,它会创建一个链接,但该链接不是蓝色的。不确定问题出在哪里。如果需要更多详细信息,请告诉我。
【问题讨论】:
【参考方案1】:这是因为 tailwind.css 在顺风中,h1 - h6 标题不起作用。
选项 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。
【讨论】:
选项 1 不起作用,因为它将删除所有核心插件.. 如果你检查你的降价输出,由于同样的原因,链接不会是蓝色的.. 对于link
css a:link color: blue !important; background-color: transparent; text-decoration: none;
感谢 Kaartik。添加自定义 CSS 是可行的,但我想知道是否有更简单的方法可以做到这一点。例如,列表在这里也不起作用。【参考方案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
类添加到要显示降价的元素中。
<div class="prose" v-html="cleanedMarkdown"></div>
.
这为降价提供了所需的格式。
【讨论】:
非常感谢!以上是关于没有在 Nuxt + Vue 项目中加载 Markdown 样式的主要内容,如果未能解决你的问题,请参考以下文章
Storybook 不会在 Vue 项目的组件中加载 SVG