Closed adi-dora closed 6 months ago
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';
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.
@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.
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.
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>
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:Additional context
No response
Code of Conduct