Plugin showcase (Shiki)

If you want to highlight code with Shiki, you can do it like this:

<script lang="ts">
	import type { Plugin } from 'svelte-exmarkdown';
	import Markdown from 'svelte-exmarkdown';
	import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
	import { createHighlighterCore } from 'shiki/core';

	let md = $state("```typescript\nconsole.log('Hello, world!');\n```");

	const otherPlugins: Plugin[] = [
		// some plugins...
	];
	const shikiPluginPromise = createHighlighterCore({
		themes: [import('shiki/themes/vitesse-light.mjs')],
		langs: [import('shiki/langs/typescript.mjs')],
		loadWasm: import('shiki/wasm')
	}).then((highlighter): Plugin => {
		return {
			rehypePlugin: [
				rehypeShikiFromHighlighter,
				highlighter,
				{ theme: 'vitesse-light' }
			]
		};
	});
</script>

<textarea bind:value={md}></textarea>

{#await shikiPluginPromise}
	<Markdown {md} plugins={otherPlugins} />
{:then shikiPlugin}
	<Markdown {md} plugins={[shikiPlugin, ...otherPlugins]} />
{:catch}
	<Markdown {md} plugins={otherPlugins} />
{/await}

Or you can use Shiki without asynchrony:

<script lang="ts">
	import type { Plugin } from 'svelte-exmarkdown';
	import Markdown from 'svelte-exmarkdown';
	import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
	import { createHighlighterCoreSync } from 'shiki/core';
	import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
	import ts from 'shiki/langs/typescript.mjs';
	import github from 'shiki/themes/github-light.mjs';

	let md = $state("```typescript\nconsole.log('Hello, world!');\n```");

	const shikiPlugin = {
		rehypePlugin: [
			rehypeShikiFromHighlighter,
			createHighlighterCoreSync({
				themes: [github],
				langs: [ts],
				engine: createJavaScriptRegexEngine()
			}),
			{ theme: 'github-light' }
		]
	} satisfies Plugin;
	const plugins: Plugin[] = [shikiPlugin];
</script>

<textarea bind:value={md}></textarea>

<Markdown {md} {plugins} />