Vuepress code block loses styling on load

[travispamaral]

If I have a regular code block on the same page as a live block, the styling gets removed when live renders. Any idea why this happens? Does live have to import styles if vuepress already uses prism?

Thanks! Again great plugin :) Happy to help submit a fix if you have any ideas!

Example of code:

Result:

[flozero]

Use vuepress plugin docgen ^^ ? It look like prism is override but i dont think it's relevant to vuepress plugin live.

Can you give your vuepress config ?

[travispamaral]

hmm Im not sure. Is that another plugin? The only plugin Im using other than defaults is this one.

[flozero]

you have no markdown plugins ? Actually vuepress is using prismjs but not the full one. The syntax highlight is almost done by a markdown plugin. That's why i ask :).

Yeah it is a plugin i developed :) https://github.com/f3ltron/vuepress-plugin-docgen

That's the start we create this plugin. It will auto generate components doc

[travispamaral]

Ah yeah Im aware, we might actually use it! Right now Im not using any plugins other than vuepress-live and whatever is installed by default. Anything else I could look at? It seems to happen when vuepress-live renders the component to the page. Maybe there is prism conflict? Like when prism initializes in live it strips classes from the default vuepress implementation?

[travispamaral]

Couple things to note here. It only happens on a page load IF there is a mix of vue-live and regular code blocks. If I switch pages the normal block renders fine until a refresh. Could vue-live not have the vue syntax? I see vue live has a language of JSX?

[elevatebart]

Hey @travispamaral I noticed that too.

I originally wanted to re-use vuepress styling as it was perfect for my needs.
Unfortunately, vuepress is adding a class on load to the inside of the prism window.

It works well for them because they render this window only once. But if the language is mixed or if you change language, it will re-render in place the editor and it will loose this class.
Let me have a look at what I can do.

[elevatebart]

I believe this is an issue with vue-prism-editor and the fact that it uses v-html to enter the prism code. I need to understand how the second time the component is rendered, it loses its language.

[travispamaral]

Ahh interesting, ok happy to help with a fix if you're able to identify. I know you all are busy! 😄

[travispamaral]

Any progress here? No rush just curious if anything has been identified. Thanks!

[elevatebart]

Have posted an issue here: koca/vue-prism-editor#30
The demo site has the exact same issue.

[travispamaral]

Awesome thanks, I'll follow!

[elevatebart]

🎉 This issue has been resolved in version 1.4.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀