Odd highlighting/styling when using Prism as a NuxtJS plugin

[CodyBontecou]

Here's how it's currently rendering:

It looks like it's being highlighted twice. Once in purple, once in grey, creating an odd 3d-like look.

Here's the code block I am using:

import Prism from 'prismjs'
import Vue from 'vue'

// Include a theme:
import 'prismjs/themes/prism-tomorrow.css'

// Include language support: (optional)
import 'prismjs/components/prism-markdown'

// Include the toolbar plugin: (optional)
import 'prismjs/plugins/toolbar/prism-toolbar'
import 'prismjs/plugins/toolbar/prism-toolbar.css'

// Include the autolinker plugin: (optional)
import 'prismjs/plugins/autolinker/prism-autolinker'
import 'prismjs/plugins/autolinker/prism-autolinker.css'

// Include the line numbers plugin: (optional)
import 'prismjs/plugins/line-numbers/prism-line-numbers'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

// Include some other plugins: (optional)
import 'prismjs/plugins/highlight-keywords/prism-highlight-keywords'
import 'prismjs/plugins/show-language/prism-show-language'
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace'

Vue.component('prism', {
  props: {
    lang: {
      type: String,
      default: 'js',
    },
  },
  mounted() {
    Prism.highlightAll()
  },
  template:
    '<div class="prism"><pre class="line-numbers" :class="`language-${lang}`" contenteditable><code><slot></slot></code></pre></div>',
})

[RunDevelopment]

The default theme uses a text-shadow like this. Where does the text-shadow property come from?

[RunDevelopment]

I meant when you inspect your page in the browser, where does the text-shadow come from?

[CodyBontecou]

Ah, sorry. It's from the class:

code[class*="language-"], pre[class*="language-"]

[RunDevelopment]

Can you also see which file or is it mangled up by the build process?

Also, could you show me a screenshot of the whole rule code[class*="language-"], pre[class*="language-"]?

[CodyBontecou]

I think you're asking for this. It looks like I'm getting it from prism.css rather than prismjs/themes/prism-tomorrow.css

[RunDevelopment]

So the problem is that you are using 2 themes at the same time.

Why does this happen? I don't know enough about Vue and its build process to answer that.

However, Vue's build process might be picking up on the styles property in our package.json. You might want to try temporarily removing that line in your local installation. If it really is the culprit, then you'll have to find a way to tell Vue to not use that CSS file.