Code Indentation in prop src #34
Description
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?