Code Indentation in prop src

[TimJJTing]

Hi, first of all thanks for the work. This is a hero for the project that I'm working on.

I am trying write my own wrapper because I want to use shiki as the syntax highlighter. This is what I have so far:

<script module>
	import { createHighlighter } from 'shiki';
	
	const _highlighter = await createHighlighter({
		themes: ['poimandres'],
		langs: ['svelte']
	});
	await _highlighter.loadLanguage('svelte');

	/**
	 * @param {string} code
	 * @param {string} lang
	 */
	function highlighter(code, lang = 'svelte') {
		const html = _highlighter.codeToHtml(code, { lang, theme: 'poimandres' });
		return html;
	}
</script>

<script>
	let { src = undefined, meta = undefined, example, code } = $props();
</script>

<div class="my-8">
	<div class="flex flex-col w-full rounded-b-md">
		<div class="flex justify-center shadow-inner rounded-t-md">
			<div class="flex justify-center items-center min-h-12 py-4">
				{@render example?.()}
			</div>
		</div>
		{@html highlighter(src)}
	</div>
</div>

<style>
	:global(pre) {
		margin: 0;
	}
</style>

It works, except code indentation is gone. Is there any way to preserve code indentation as the default wrapper does?