如何禁用Vuetify的样式？

Question

我希望将Markdown解析为HTML并使用语法高亮显示。

我的SFC如下：

<template>
    <div v-html="html"></div>
</template>
<script>
import marked from 'marked'
import hljs from 'highlightjs';

export default {
    name:"Article",
    props:['md'],
    computed:{
        html(){
            return marked(this.md)
        }
    },
    created: function () {
        marked.setOptions({
            langPrefix: '',
            highlight: function(code, lang) {
            return hljs.highlightAuto(code, [lang]).value
            }
        })
    },
}
</script>
<style src='highlightjs/styles/github-gist.css'></style>

生成的代码块如下所示：

这是Vuetify的样式。

https://vuetifyjs.com/en/styles/content/#code

我希望能够禁用或覆盖它。

以下代码对于代码块无效：

<style scoped>
.v-application code {
    background-color: unset !important;
    color: unset !important;
    box-shadow: unset !important;
}
.myclass {
     color:red !important;
}
</style>

结果：

- user13087034

---

在你的 DIV 上添加一个 CSS 类来覆盖不需要的样式。你可能需要添加 !important 修饰符。 - IVO GELOV

Answer 1

Vuetify为code标签指定了以下CSS：

.v-application code {
    background-color: #f5f5f5;
    color: #bd4147;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 
                0 1px 1px 0 rgba(0,0,0,.14),
                0 1px 3px 0 rgba(0,0,0,.12); 
}

你可以通过打开开发者工具并检查网站上的code标签来查看这个。

要么覆盖这些值为您自己的值，要么将它们全部设置为unset或unset !important。例如：

.v-application code {
    all: unset;
    color: #eee
}

/* Or with increased specificity */
.v-application code.code--custom {
  all: unset;
  color: #eee
}

- AlekseyHoffman

---

在你的环境中能否运行？在我的程序中无法运行。 - user13087034

@PONPON 尝试在 App.vue 中执行此操作。如果您在带有 <style scoped> 的组件中执行此操作，则可能无法正常工作。另外，您可以通过添加自定义类来增加特定性，例如在您的示例中：.v-application code.myclass {...} 而不是 .myclass {...}。 - AlekseyHoffman

Answer 2

实际上，如果您在main.js中直接在Vuetify之后导入您的HighlightJS CSS，那么您遇到的样式覆盖问题将不会成为问题。

//main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import '<your_path>/highlight.min.css'

考虑使用Vue指令进行全局使用。

//main.js

Vue.directive('highlightjs', {
  deep: true,
  bind: function(el, binding) {
    // highlight all targets
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      // override this in case of binding 
      if (binding.value) {
        target.textContent = binding.value
      }
      hljs.highlightBlock(target)
    })
  },
})

然后你可以简单地像这样使用它：

<pre v-highlightjs>
    <code class="javascript">
        // your code goes here //
    </code>
</pre>

我为此制作了一个JSFIDDLE，这是Chris Hager的Vue HighlightJS示例的修改版本。

https://jsfiddle.net/b8jontzr/2/

- Hexodus