How to convert a Svelte Component into a string, and highlight with Shikiji

[shyakadavis]

Hi.

I wanted to ask for help with 2 things.

1. How to convert a Svelte component into a string.

Why?

Well, I find it tedious and/or ugly writing the md string passed to the Markdown component, especially for very long code blocks. Ergo, I wanted to use something that, instead of looking like this:

<script lang="ts">
	import SvelteSeo from 'svelte-seo';
	import Markdown from 'svelte-exmarkdown';
	import { Playground } from '$lib/components/shared';
	import DotPattern from '../_components/dot-pattern.svelte';

	let md = `
\`\`\`html
<div
	class="min-h-[256px] w-full bg-[radial-gradient(hsl(var(--foreground))_1px,_transparent_0)] bg-[length:8px_8px]"
/>
\`\`\`
`;
</script>

<SvelteSeo title="Dot Pattern | Experiments" />

<Playground>
	<DotPattern slot="output" />
	<Markdown {md} slot="code" />
</Playground>

It could be simplified to something like this.

<script lang="ts">
	import SvelteSeo from 'svelte-seo';
	import Markdown from 'svelte-exmarkdown';
	import { Playground } from '$lib/components/shared';
	import DotPattern from '../_components/dot-pattern.svelte';

	const stringified_component = DotPattern;

	let md = `
\`\`\`html
${stringified_component}
\`\`\`
`;
</script>

<SvelteSeo title="Dot Pattern | Experiments" />

<Playground>
	<DotPattern slot="output" />
	<Markdown {md} slot="code" />
</Playground>

2. How to highlight code blocks using Shikiji and/or its rehype plugin

https://github.com/antfu/shikiji seems nice, and with its https://github.com/antfu/shikiji/tree/main/packages/rehype-shikiji plugin, it could simplify the process.

How can I use this with https://github.com/ssssota/svelte-exmarkdown/, and how do you recommend I set my desired theme in a global place without repeating the configuration logic?

---

Thank you for the consideration.

[ssssota]

1. How to convert a Svelte component into a string.

You can import component as asset with ?raw suffix.
This way has some limitations.

1. Use Vite.js (including SvelteKit)
2. Component must not include <script> and <style> tags.

2. How to highlight code blocks using Shikiji and/or its rehype plugin

rehype-shikiji are not supported.
Because the plugin has an asynchronous transformer.
If you want to highlight code, I recommend using rehype-hightlight.