1

我试图在我的 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 |"
    }
  }
})
<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>

4

1 回答 1

1

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

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

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

同样在其所有表子项（即 on 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>

于 2022-02-09T09:47:10.790 回答