How to get CodeFlask code editor style to work properly with Vuetify

Viewed 746

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.

1 Answers

Regarding the cursor not showing, I was having a similar issue when trying to integrate CodeFlask into my Ember app, but removing the background color that our app defined on the <pre> tag as suggested in this issue fixed that for me.

Related