如何使用 vuetify 为 markdown-it-vue 插件启用暗模式

分享于2022年07月17日 darkmode javascript markdown-it vue.js vuetify.js 问答
【问题标题】:如何使用 vuetify 为 markdown-it-vue 插件启用暗模式(How to enable dark mode for markdown-it-vue plugin with vuetify)
【发布时间】:2022-02-09 17:47:10
【问题描述】:

我正在尝试在我的 Vue 应用程序中显示一些文档。由于它们是基于 markdown 格式的,所以我已经包含了 markdown-it-vue 插件。

但是,该插件不支持 vuetify 暗模式。有什么方法可以支持吗?下面是一个最小的例子。我想以白色突出显示文本,以灰色突出显示表格背景。也许 markdown-it-vue.css 需要更改,但我不知道该怎么做。提前谢谢!

const vm = new Vue({
  el: "#app",
  data() {
    return {
      content: "This needs to be white\n| Item | Price | # In stock |\n|--------------|-----------|------------|\n| Juicy Apples | 1.99 | *7* |\n| Bananas      | **1.89** | 5234 |"
    }
  }
})







【解决方案1】:

markdown-it-vue 的内容可以用 CSS 设置样式,因此您可以将自己的深色主题应用于 Markdown 内容。 Vuetify 在应用根元素上设置了 .theme--dark 类, markdown-it-vue 的元素有 .markdown-body 类。

.theme--dark .markdown-body 上,应用 color !important 来覆盖Vuetify 的主题:

.theme--dark .markdown-body {
  color: white !important;
}

同样在其所有子表(即 table * )上,应用 background 颜色::

.theme--dark .markdown-body table * {
  background: gray;
}

const vm = new Vue({
  el: "#app",
  data() {
    return {
      dark: true,
      content: "This needs to be white\n| Item | Price | # In stock |\n|--------------|-----------|------------|\n| Juicy Apples | 1.99 | *7* |\n| Bananas      | **1.89** | 5234 |"
    }
  }
})
.theme--dark .markdown-body {
  color: white !important;
}

.theme--dark .markdown-body table * {
  background: gray;
}






Toggle dark mode