如何禁用 Vuetify 的样式？

Question

我想将 markdown 解析为 html 并使用语法高亮。

我的证监会如下：

<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>

结果：

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
}

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 Directive 进行全局使用。

//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/

如何禁用 Vuetify 的样式？

How to disable Vuetify's style?

vue.js

markdown

vuetify.js

highlightjs