Feat: Code highlighting for docs (#18)

* Added shiki

* Moved stores to `docs` module

* Resolved pnpm-lock conflict

* Fixed code block issues

* Better specificy, fixed @html warning

package.json

@@ -55,6 +55,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.1.9",
+		"shiki": "^1.3.0",
 		"svelte": "5.0.0-next.115",
 		"svelte-check": "^3.6.0",
 		"tailwindcss": "^3.3.6",

src/app.d.ts

@@ -4,7 +4,9 @@ declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
-		// interface PageData {}
+		interface PageData {
+			highlighter: import('shiki').Highlighter;
+		}
 		// interface PageState {}
 		// interface Platform {}
 	}

src/app.pcss

@@ -108,6 +108,13 @@ footer .anchor {
 	@apply text-sm text-emerald-500 dark:text-emerald-300;
 }
 
+/* Shiki Highlighting */
+html.dark .shiki,
+html.dark .shiki span {
+	color: var(--shiki-dark) !important;
+	background-color: var(--shiki-dark-bg) !important;
+}
+
 /* Keyboard */
 .kbd {
 	@apply text-sm bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
@@ -135,12 +142,6 @@ footer .anchor {
 	@apply bg-rose-500 hover:bg-rose-600 text-white text-sm font-medium py-1 px-4 rounded shadow-lg;
 }
 
-/* Pre */
-.pre {
-	@apply bg-surface-100 dark:bg-surface-700 p-4 rounded-lg shadow text-sm;
-	@apply overflow-x-auto;
-}
-
 /* Cards */
 .card {
 	@apply p-8 lg:p-12 rounded-3xl;

src/docs/components/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import MoonlightDark from '$docs/themes/moonlight-dark.json';
+	import MoonlightLight from '$docs/themes/moonlight-light.json';
+	import { page } from '$app/stores';
+	import type { BuiltinLanguage, SpecialLanguage } from 'shiki';
+
+	interface Props {
+		code: string;
+		lang: BuiltinLanguage | SpecialLanguage;
+	}
+
+	let { code, lang = 'text' }: Props = $props();
+
+	const html = $derived(
+		// eslint-disable-next-line svelte/valid-compile
+		$page.data.highlighter.codeToHtml(code.trim(), {
+			lang,
+			themes: {
+				// @ts-expect-error - Shiki theme type is annoyingly strict
+				dark: MoonlightDark,
+				// @ts-expect-error - Shiki theme type is annoyingly strict
+				light: MoonlightLight
+			}
+		})
+	);
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -->
+{@html html}
+
+<!-- eslint-enable svelte/no-at-html-tags -->
+
+<style lang="postcss">
+	:global(pre.shiki) {
+		@apply p-4 text-sm rounded-md whitespace-pre-wrap;
+	}
+</style>

src/lib/components/Navigation/Navigation.svelte → src/docs/components/Navigation/Navigation.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { drawer } from '$lib/stores.svelte';
+	import { drawer } from '$docs/stores.svelte';
 	// Icons
 	import IconStart from 'lucide-svelte/icons/rocket';
 	import IconTooltips from 'lucide-svelte/icons/message-square';
 	import IconPopovers from 'lucide-svelte/icons/square-mouse-pointer';
 	import IconModals from 'lucide-svelte/icons/layers-2';
 	import IconContextMenus from 'lucide-svelte/icons/square-menu';
 	// Components
-	import Logo from '$lib/components/Logo/Logo.svelte';
+	import Logo from '$docs/components/Logo/Logo.svelte';
 
 	// Props
 	let { classes = '' } = $props();

src/lib/components/PageHeader/PageHeader.svelte → src/docs/components/PageHeader/PageHeader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { drawer } from '$lib/stores.svelte';
+	import { drawer } from '$docs/stores.svelte';
 
 	// Icons
 	import IconMenu from 'lucide-svelte/icons/menu';