I am trying to use CodeFlask together with Vuetify to show some code on my website. It seems like Vuetify is messing with the styling of the code editor window, making it look all weird and the the text cursor is not visible either.
I've tried setting all: unset on the given div, but it has not made a difference. I can't really figure out a way to make the code editor look like it's supposed to without removing Vuetify entirely.
The following example you can see what it looks like together with Vuetify.
HTML
<div id="app">
<v-app>
<v-card id="card">
Test
<div id="code">
</div>
</v-card>
</v-app>
</div>
JS file
new Vue({
el: '#app',
mounted() {
flask = new CodeFlask('#code', {
language: 'js',
lineNumbers: true,
})
}
})
The expected result should be something more similar to what you can see in the documentation I linked above.