How to disable Vuetify's style?

Question

I want to parse markdown to html and use syntax highlighting.

My SFC is as follows:

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

The resulting code blocks are look like this:

This is Vuetify's style.

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

I want to disable or override it.

The following code does not work for code blocks:

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

Result:

Glowworm

Put a CSS class on your DIV to override undesired styles.You may need to add !important modifier. – Pulsation

Answer 1

Vuetify has the following CSS specified for the code tags:

.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); 
}

You can see this if you open developer tools and inspect a code tag on their website.

Either override those values to your own, or just set them all to unset or unset !important. For example:

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

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

Cavitation

Does it work in your environment? It does not work in my program. – Glowworm

@PONPON try doing this inside App.vue. If you're doing this in a component with <style scoped>, it might not work. Also you can try increasing specificity by adding a custom class, e.g. in your example: .v-application code.myclass {...} instead of .myclass {...} – Cavitation

Answer 2

Actualy the style override you suffer from wouldn't be a problem if you just import your HighlightJS CSS directly after Vuetify in your main.js.

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

Consider also using a Vue Directive for global usage.

//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)
    })
  },
})

Then you can simply use it like this:

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

I made a JSFIDDLE for this, which is a modified version of a vue HighlightJS example by Chris Hager.

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

Particular