feature(plus.skeleton.dev): shiki (#4477)

Author: Hugos68

pnpm-lock.yaml

@@ -21,6 +21,11 @@
 		"@iconify-json/simple-icons": "catalog:",
 		"@lucide/svelte": "catalog:",
 		"@neondatabase/serverless": "catalog:",
+		"@shikijs/core": "catalog:",
+		"@shikijs/engine-javascript": "catalog:",
+		"@shikijs/langs": "catalog:",
+		"@shikijs/themes": "catalog:",
+		"@shikijs/types": "catalog:",
 		"@skeletonlabs/skeleton": "workspace:*",
 		"@skeletonlabs/skeleton-svelte": "workspace:*",
 		"@sveltejs/adapter-vercel": "catalog:",

sites/plus.skeleton.dev/package.json

@@ -0,0 +1,26 @@
+/* Generate by @shikijs/codegen */
+import { createSingletonShorthands, createBundledHighlighter } from '@shikijs/core';
+import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript';
+import type { DynamicImportLanguageRegistration, DynamicImportThemeRegistration } from '@shikijs/types';
+
+type BundledLanguage = 'ts' | 'tsx' | 'svelte';
+type BundledTheme = 'github-light' | 'github-dark';
+
+const bundledLanguages = {
+	ts: () => import('@shikijs/langs/typescript'),
+	tsx: () => import('@shikijs/langs/tsx'),
+	svelte: () => import('@shikijs/langs/svelte'),
+} satisfies Record<BundledLanguage, DynamicImportLanguageRegistration>;
+
+const bundledThemes = {
+	'github-light': () => import('@shikijs/themes/github-light'),
+	'github-dark': () => import('@shikijs/themes/github-dark'),
+} satisfies Record<BundledTheme, DynamicImportThemeRegistration>;
+
+const createHighlighter = /* @__PURE__ */ createBundledHighlighter<BundledLanguage, BundledTheme>({
+	langs: bundledLanguages,
+	themes: bundledThemes,
+	engine: () => createJavaScriptRegexEngine(),
+});
+
+export const { codeToHtml } = /* @__PURE__ */ createSingletonShorthands<BundledLanguage, BundledTheme>(createHighlighter);

sites/plus.skeleton.dev/src/lib/code-highlight/shiki.bundle.ts

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	export interface Props {
+		code: Parameters<typeof codeToHtml>[0];
+		lang: Parameters<typeof codeToHtml>[1]['lang'];
+	}
+</script>
+
+<script lang="ts">
+	import { codeToHtml } from '$lib/code-highlight/shiki.bundle';
+
+	const { code, lang }: Props = $props();
+
+	const html = $derived(
+		await codeToHtml(code, {
+			lang,
+			themes: {
+				light: 'github-light',
+				dark: 'github-dark',
+			},
+			defaultColor: 'light-dark()',
+		}),
+	);
+</script>
+
+{@html html}

sites/plus.skeleton.dev/src/lib/components/code/code.svelte

@@ -1,3 +1,9 @@
+<script>
+	import Code from '$lib/components/code/code.svelte';
+</script>
+
 <div class="container-page">
 	<p>Now viewing <code class="code">themes (repo)</code></p>
+
+	<Code code="console.log('Hello, World!');" lang="ts" />
 </div>