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

如果您只是直接在HighlightJS中的Vuetify之后导入main.js 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的样式？

2 个答案: