Missing code and/or documentation when using custom layout

[AustinGil]

Something in a recent version changed and broke how the custom layouts work. I've found the problem and wanted to document the solution here:

First, one of the critical steps for prismjs to work is to have a .language- class present on the page. In the default layout, there is .language.vue. When providing a custom layout, I think the editor slot should have that, but it does not. So the solution I found is to wrap the editor slot with a div with the class language-vue. This allows prismjs styles to be applied.

Secondly, it looks like the inclusion of critical assets has been changed. The prism theme and prism editor CSS are no longer included by default when you provide a custom layout. I looked at the default layout Vue file to find my solution which was to include those assets in my custom layout

<script>
import "prismjs/themes/prism-okaidia.css";
import "vue-prism-editor/dist/prismeditor.min.css";
</script>

If I get the chance, I'll see about opening a PR for this. In the meantime, I wanted to document these issues here in case others run into them and need a solution.

For the fix, does it make more sense to fix the issue in the code, or was this a deliberate design? If so, then I can just add more documentation around it.

[elevatebart]

Thank you Austin for the report.

Did you check what version made that change?

PS: I am happy to see you are still using vue-live. I have left it alone for way too long. Working on fixing that.

[AustinGil]

Yeah, well it's gotten me this far :)

I hope you dont feel any pressure for my sake to work on this. I just worked through it and thought it'd be good to document it.

I'm sorry, but I'm not sure what version broke. It was a long time since I had upgraded.