Order of pre-processing for code highlighting

[matths]

I would like to show some of my source files within my MDSvex/Sveltekit based blog,
and I can easily import the source file as text using Vite's raw syntax for that and
present the source code to the user inside a <pre></pre> Tag.

<script>
  import source from '../../lib/demo.svelte?raw';
</script>

<pre>{source}</pre>

Now I would like to have code highlighting with Prism from MDSvex, but this ist not possible,
due to MDS vex preprocessing is done before Svelte compile, right?

<script>
  import source from '../../lib/demo.svelte?raw';
</script>

` ` `svelte
{source}
` ` `

So, what is the preferred way to apply Code Highlighting then? Do I have to duplicate code for Highlighting and create a Svelte component for that like this?

<script>
  import CodeHighlight from '$lib/CodeHighlight.svelte';
  import source from '../../lib/demo.svelte?raw';
</script>

<CodeHighlight>{source}</CodeHighlight>

Is there a CodeHighlight component already available?
Or is there another approach where I can influence the order of interpretation somehow?