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

Question

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

但是，该插件不支持 vuetify 黑暗模式。有什么办法可以支持吗？下面是一个最小的例子。我想用白色突出显示文本，用灰色突出显示 table 背景。也许 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 |"
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">

<div id="app">
  <v-app :dark="true">
    <markdown-it-vue :content="content"></markdown-it-vue>
  </v-app>
</div>

Answer 1

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

在 .theme--dark .markdown-body 上，应用 color 和 !important 来覆盖 Vuetify 的主题：

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

同样在其所有 table children 上（即在 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;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">

<div id="app">
  <v-app :dark="dark">
    <v-btn @click="dark = !dark">Toggle dark mode</v-btn>
    <markdown-it-vue :content="content"></markdown-it-vue>
  </v-app>
</div>

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

How to enable dark mode for markdown-it-vue plugin with vuetify

javascript

vue.js

vuetify.js

markdown-it

darkmode