[Bug Report]: Adding prismPlugin to VCodeBlock component removes syntax highlighting

[adi-dora]

Vue Code Block Version

2.3.1

Vue Version

3.4.19

Bug description

So I'm using html <VCodeBlock :code="showContent" prismjs :lang="lang" theme="tomorrow" v-if="showContent != ''" :label="currPath" class="hellix" /> and it works perfectly. The syntax highlight renders correctly and it's great. However, when I try this:

        ```html
        <VCodeBlock
          :code="showContent"
          prismjs
          prismPlugin
          :lang="lang"
          theme="atom-one-light"
          v-if="showContent != ''"
          :label="currPath"
          class="hellix autolinker"
        />``` does not work. The syntax highlight disappears and the plugins do not get applied. I imported the following:

        ```js
           import 'prismjs/plugins/autolinker/prism-autolinker.js';
           import 'prismjs/plugins/autolinker/prism-autolinker.css';

### Steps to reproduce

1. Have a regular VCodeBlock and run your code. The syntax highlight should work correctly.
2. Add the prismPlugin prop to the component.
3. Syntax highlighting stopped working

### Relevant log output

```shell
No output

Additional context

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[webdevnerdstuff]

Without more details, my only guess is that you haven't imported Prism. I tested the autolinker plugin using my built in Playground to the repo and it is working correctly. I might need to add that to the example so it's more clear. Prism plugin documentation is a bit lacking imo.

import Prism from 'prismjs'; // <- This is needed
import 'prismjs/plugins/autolinker/prism-autolinker.js';
import 'prismjs/plugins/autolinker/prism-autolinker.css';

[adi-dora]

I have the Prism from 'prismjs' line as well, but there are still issues with rendering it. What more details will help to resolve this problem? I did some of my own troubleshooting, and I also found that having the v-if statement prevents initial rendering.

[adi-dora]

@webdevnerdstuff

[webdevnerdstuff]

The problem is most likely that by using the v-if statement you are basically telling the component (in reality Prism) to re-render the code block from nothing to something, which won't work as the code value is not reactive. It works the same as if it were just using Prism without this component.

My suggestion is to wrap the component inside another div (or whatever element) and put the v-if on that element. If that still doesn't work, try making an example in something like Stackblitz to replicate the issue as close as possible to what you are doing.

[adi-dora]

Actually, without the prismPlugin component set to true, the behavior was working correctly, where it would render the syntax highlighting by going from nothing to a huge chunk.

[webdevnerdstuff]

I'm guessing the Prism plugin doesn't support what you are trying to do. I tested it with Prism (not via the plugin) and it had the same results.

Ex.

<pre
  v-if="show"
  class="language-js"
>
  <code class="language-js">{{ code }}</code>
</pre>