The problem with using the npm package is that the css file cannot be fetched outside of the web root, which is needed if changing the styles (for example switching from light/dark modes).

The reason the highlight.js implementation works is it a self hosted css file (or via a CDN). On their demo page, they actually load a css file with all themes included (https://highlightjs.org/demo), which makes sense for their demo, but for any normal project that uses one theme, a self hosted file of the specific theme makes more sense.

I've opened up a discussion as I think this is something that could be improved upon.
https://github.com/webdevnerdstuff/vue3-code-block/discussions/25

Understood thanks. Could you not offer an overload which allowed it to be self-hosted on a domain suitable for the installation rather than forcing the CDN to be used? This would allow us to host it within our official domains, but also allow the functionality you describe.

I suspect there may be something possible with the bundler to achieve what you're describing, but it's not really an area I've spent much time in, so I'll work on the premise that the CSS needs to be hosted separately.

@tommed I added a new cssPath prop that you can use to link to the location of your choice. Please be aware that I have updated this repo and it's npm package to my scoped npm name. Also if you like this package please give me a star #selfPromotion :)

New npm package location: https://www.npmjs.com/package/@wdns/vue-code-block

This works great, thank you so much!

The only other CSP issue was the need to use 'unsafe-inline' style-src as it writes CSS inline. This is unfortunate, but given it's CSS and not JScript, we will just have to justify an exception for this behaviour for each of our customers when they do pen. testing. Unless there's something that can be done about this...?

This is the CSP required to make your code block work:

style-src 'self' 'unsafe-inline';

Ideally obviously, "unsafe" wouldn't normally be needed! ha ha ;)

Perhaps in a future release or refactoring I can try to work around inline styles. Most of the inline styles don't necessarily need reactivity I think. But it's definitely something I should keep in mind.