From 479690d2b21efe2668a11dab2f75a34a142f23f3 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 11 Oct 2024 11:45:19 -0700
Subject: [PATCH 01/14] feat: Implement dark mode switch

---
 src/app.css                           |  4 +++
 src/lib/components/ThemeSwitch.svelte | 39 +++++++++++++++++++++++++++
 src/lib/theme.ts                      | 13 +++++++++
 src/routes/+layout.svelte             |  2 +-
 src/routes/+page.svelte               |  6 ++++-
 src/routes/Navbar.svelte              |  2 ++
 6 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/ThemeSwitch.svelte
 create mode 100644 src/lib/theme.ts

diff --git a/src/app.css b/src/app.css
index 193a062..b761127 100644
--- a/src/app.css
+++ b/src/app.css
@@ -71,6 +71,10 @@
   }
 }
 
+body {
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
 @layer base {
   * {
     @apply border-border;
diff --git a/src/lib/components/ThemeSwitch.svelte b/src/lib/components/ThemeSwitch.svelte
new file mode 100644
index 0000000..cd4f708
--- /dev/null
+++ b/src/lib/components/ThemeSwitch.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Moon, Sun } from 'lucide-svelte';
+	import { theme } from '$lib/theme'
+
+	function toggleTheme() {
+		theme.update((currentTheme) => {
+			const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'
+
+			document.documentElement.setAttribute('color-scheme', newTheme)
+			localStorage.setItem('color-scheme', newTheme)
+
+			if (newTheme === "tokiwa") {
+				document.documentElement.classList.remove('dark');
+			} else {
+				document.documentElement.classList.add('dark');
+			}
+			return newTheme
+		})
+	}
+</script>
+
+<button on:click={toggleTheme} aria-label="Toggle Theme">
+	{#if $theme === "tokiwa"}
+		<Sun />
+	{:else}
+		<Moon />
+	{/if}
+</button>
+
+<style>
+	button {
+		padding: 0;
+		font-weight: inherit;
+		background: none;
+		border: none;
+		box-shadow: none;
+		overflow: hidden;
+	}
+</style>
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..55ad19f
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store'
+import { browser } from "$app/environment"
+
+type Theme = 'tokiwa' | 'star'
+
+const userTheme = browser && localStorage.getItem('color-scheme')
+
+export const theme = writable(userTheme ?? 'tokiwa')
+
+// set the theme
+export function setTheme(newTheme: Theme) {
+	theme.set(newTheme)
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8c0ad4f..7b2e80b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -40,7 +40,7 @@
 		color: rgb(128,128,128);
 		pointer-events: none;
 	}
-	:global(a) {
+	:global(a), :global(button) {
 		color: theme('colors.eucalyptus.400');
 		&:hover,
 		&:focus {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 04c862e..1b5e70d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import { routes } from "$lib/sitemap.ts"
 	import { Separator } from "$lib/components/ui/separator/index.js";
 	import { Rss } from "lucide-svelte";
+	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	let scrollPosition: number = .5;
 	let scrollHeight: number = 1;
 	let progress: number = 0;
@@ -58,6 +59,8 @@
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
+				<ThemeSwitch />
+				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				<a class="icon" href="/rss.xml"><Rss /></a>
 			</div>
 		</div>
@@ -65,7 +68,7 @@
 </div>
 
 <main>
-	<div id="bio" class="bg-background">
+	<div id="bio">
 		<div class="p-1">
 			<div class="flex">
 				<div id="info flex-col">
@@ -130,6 +133,7 @@
 	main {
 		width: 100%;
 		@apply bg-background;
+		@apply dark:bg-gray-800;
 		box-shadow:
 			0px -5px 10px 10px rgba(200,200,200,0.4);
 	}
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index cc0e47c..0f63ef0 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
 	import { name } from '$content/metadata.json';
+	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	import { Rss } from "lucide-svelte";
 
 	function isCurrentLink(pathname, route) {
@@ -19,6 +20,7 @@
 			class:disabled-link={item.disabled}
 			href={item.route}>{item.name}</a>
 	{/each}
+	<div><ThemeSwitch /></div>
 	<a class="icon" href="/rss.xml"><Rss /></a>
 </div>
 

From 20f663e654a118b90d96523a1ebbca73ab191e80 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 11 Oct 2024 11:49:58 -0700
Subject: [PATCH 02/14] feat: Glowing links in dark mode

---
 src/routes/+layout.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7b2e80b..ee365b8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -107,6 +107,11 @@
 			gap: 20px;
 		}
 	}
+	@media (prefers-color-scheme: dark) {
+		:global(a), :global(button) {
+			text-shadow: 0 0 5px theme('colors.eucalyptus.400');
+		}
+	}
 	main {
 		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;

From e8ef1d6a0ebe37abcac2cb844125bf6339336b4f Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 11 Oct 2024 11:50:31 -0700
Subject: [PATCH 03/14] fix: Glowing links inherit colour

---
 src/routes/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ee365b8..17b941b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -109,7 +109,7 @@
 	}
 	@media (prefers-color-scheme: dark) {
 		:global(a), :global(button) {
-			text-shadow: 0 0 5px theme('colors.eucalyptus.400');
+			text-shadow: 0 0 5px;
 		}
 	}
 	main {

From 95095083c39d2337b491edf3fadfa87573e40e08 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 11 Oct 2024 14:43:20 -0700
Subject: [PATCH 04/14] refactor: Move global styles to `app.css`

---
 .pre-commit-config.yaml   |  2 +-
 src/app.css               | 57 ++++++++++++++++++++++++++++++++++++++
 src/routes/+layout.svelte | 58 ---------------------------------------
 3 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 4e128de..3e6b0fa 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -11,7 +11,7 @@ repos:
   hooks:
   - id: conventional-pre-commit
     stages: [commit-msg]
-    args: [feat, fix, chore, test, build, merge]
+    args: [feat, fix, chore, test, build, merge, refactor]
 - repo: local
   hooks:
   - id: eslint
diff --git a/src/app.css b/src/app.css
index b761127..329d28d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -95,3 +95,60 @@ html {
 hr {
   @apply separator;
 }
+
+a, button {
+	color: theme('colors.eucalyptus.400');
+	&:hover,
+	&:focus {
+		color: theme('colors.java.500');
+	}
+}
+.dark a:not(.disabled-link),button {
+	text-shadow: 0 0 5px;
+}
+.nav-link {
+	@apply text-lg;
+	font-weight: 500;
+	font-family: serif;
+}
+a.disabled-link {
+	color: rgb(128,128,128);
+	pointer-events: none;
+}
+a:not(.icon) {
+	position: relative;
+	text-decoration: inherit;
+
+	&::after {
+		content: "";
+		display: block;
+		width: 100%;
+		position: absolute;
+		height: 2px;
+		bottom: 0;
+		left: 0;
+		background-color: theme('colors.java.500');
+		transform: scaleX(0);
+		transition: transform 0.3s ease;
+	}
+
+	&:hover,
+	&:focus {
+		&::after {
+			content: "";
+			position: absolute;
+			transform: scaleX(1);
+		}
+	}
+}
+a.current-link {
+	color: theme('colors.magenta.500');
+
+	&::after {
+		background-color: theme('colors.magenta.500');
+	}
+	&:hover,
+	&:focus {
+		color: theme('colors.magenta.500');
+	}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 17b941b..bdee40b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -31,59 +31,6 @@
 {/if}
 
 <style>
-	:global(.nav-link) {
-		@apply text-lg;
-		font-weight: 500;
-		font-family: serif;
-	}
-	:global(a.disabled-link) {
-		color: rgb(128,128,128);
-		pointer-events: none;
-	}
-	:global(a), :global(button) {
-		color: theme('colors.eucalyptus.400');
-		&:hover,
-		&:focus {
-			color: theme('colors.java.500');
-		}
-	}
-	:global(a):not(.icon) {
-		position: relative;
-		text-decoration: inherit;
-
-		&::after {
-			content: "";
-			display: block;
-			width: 100%;
-			position: absolute;
-			height: 2px;
-			bottom: 0;
-			left: 0;
-			background-color: theme('colors.java.500');
-			transform: scaleX(0);
-			transition: transform 0.3s ease;
-		}
-
-		&:hover,
-		&:focus {
-			&::after {
-				content: "";
-				position: absolute;
-				transform: scaleX(1);
-			}
-		}
-	}
-	:global(a.current-link) {
-		color: theme('colors.magenta.500');
-
-		&::after {
-			background-color: theme('colors.magenta.500');
-		}
-		&:hover,
-		&:focus {
-			color: theme('colors.magenta.500');
-		}
-	}
 	#layout {
 		max-width: max(80vw, 100vh);
 		margin-left: auto;
@@ -107,11 +54,6 @@
 			gap: 20px;
 		}
 	}
-	@media (prefers-color-scheme: dark) {
-		:global(a), :global(button) {
-			text-shadow: 0 0 5px;
-		}
-	}
 	main {
 		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;

From f2344ea3cbc079d2eb23de0ee1f0fa616e0fc7d9 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 11 Oct 2024 15:06:17 -0700
Subject: [PATCH 05/14] feat: Put ThemeSwitch after CSS

---
 src/routes/+page.svelte  | 4 ++--
 src/routes/Navbar.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e834856..116f99f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -59,9 +59,9 @@
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
-				<ThemeSwitch />
-				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				<a class="icon" href="/rss.xml"><Rss /></a>
+				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
+				<ThemeSwitch />
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 48d4168..157c7d4 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -20,8 +20,8 @@
 			class:disabled-link={item.disabled}
 			href={item.route}>{item.name}</a>
 	{/each}
-	<div><ThemeSwitch /></div>
 	<a class="nav-link icon" href="/rss.xml"><Rss /></a>
+	<div><ThemeSwitch /></div>
 </div>
 
 <style>

From 87627633903f9c09ac9d44aef9a9341a4baff2da Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 12:11:40 -0700
Subject: [PATCH 06/14] feat: Prose dark mode

---
 src/app.css                                |  2 +-
 src/content/post/the-perfect-math-class.md |  2 +
 src/routes/+page.svelte                    |  3 +-
 src/routes/[slug=extra]/+page.svelte       |  2 +-
 src/routes/post/[slug]/+page.svelte        |  2 +-
 tailwind.config.ts                         | 51 ++++++++++++++++++----
 6 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/app.css b/src/app.css
index 329d28d..80580bc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -41,7 +41,7 @@
 
   .dark {
     --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+    --foreground: 230 9.1% 97.8%;
 
     --muted: 12 6.5% 15.1%;
     --muted-foreground: 24 5.4% 63.9%;
diff --git a/src/content/post/the-perfect-math-class.md b/src/content/post/the-perfect-math-class.md
index e1d3717..113e322 100644
--- a/src/content/post/the-perfect-math-class.md
+++ b/src/content/post/the-perfect-math-class.md
@@ -4,3 +4,5 @@ date: '2024-09-15'
 tags: ["Cirno"]
 ---
 # Content
+
+Here are some contents for the perfect math class. [A link](https://example.com)
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 116f99f..db8f46d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -84,7 +84,7 @@
 				</div>
 			</div>
 		</div>
-		<article id="bio-core" class="prose lg:prose-xl dark:prose-invert">
+		<article id="bio-core" class="prose lg:prose-xl dark:prose-dark">
 			<Content />
 		</article>
 	</div>
@@ -175,7 +175,6 @@
 		margin-left: 50px;
 	}
 	#bio-core > :global(h1) {
-		color: theme('colors.eucalyptus.700');
 		font-weight: normal;
 		border-bottom: 1px solid;
 	}
diff --git a/src/routes/[slug=extra]/+page.svelte b/src/routes/[slug=extra]/+page.svelte
index d175188..6dd6036 100644
--- a/src/routes/[slug=extra]/+page.svelte
+++ b/src/routes/[slug=extra]/+page.svelte
@@ -12,7 +12,7 @@
 </svelte:head>
 
 <hr />
-<article class="prose lg:prose-xl dark:prose-invert p-4">
+<article class="prose lg:prose-xl dark:prose-dark p-4">
 	<Content />
 </article>
 <hr />
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
index 9878002..22fcab7 100644
--- a/src/routes/post/[slug]/+page.svelte
+++ b/src/routes/post/[slug]/+page.svelte
@@ -13,7 +13,7 @@
 <PostHeader post={post} inactive={true}/>
 
 <hr />
-<article class="prose lg:prose-xl dark:prose-invert p-4">
+<article class="prose lg:prose-xl dark:prose-dark p-4">
 	<Content />
 </article>
 <hr />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0b7da4c..b162b49 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -109,7 +109,18 @@ const config: Config = {
 				mono: "'Fira Code','Cascadia Code',Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New','Sarasa Mono SC','Noto Sans CJK SC','monospace', monospace"
 			},
 			typography: ((theme) => {
-				const markdownCommon = {
+				const common = {
+					ul: {
+						listStyleType: "square",
+						listStylePosition: "outside",
+					},
+					ol: {
+						listStyleType: "decimal",
+						listStylePosition: "outside",
+					},
+					maxWidth: "100%",
+				};
+				const themeTokiwa = {
 					h1: {
 						color: theme('colors.eucalyptus.700'),
 					},
@@ -128,27 +139,49 @@ const config: Config = {
 							color: theme('colors.java.500'),
 						},
 					},
-					ul: {
-						listStyleType: "square",
-						listStylePosition: "outside",
+				};
+				const themeStar = {
+					color: theme('colors.gray.200'),
+					h1: {
+						color: theme('colors.eucalyptus.300'),
 					},
-					ol: {
-						listStyleType: "decimal",
-						listStylePosition: "outside",
+					h2: {
+						color: theme('colors.eucalyptus.300'),
+					},
+					h3: {
+						color: theme('colors.eucalyptus.200'),
+					},
+					h4: {
+						color: theme('colors.eucalyptus.200'),
+					},
+					a: {
+						color: theme('colors.eucalyptus.500'),
+						"&:focus": {
+							color: theme('colors.java.500'),
+						},
 					},
-					maxWidth: "100%",
 				};
 
 				return {
 					DEFAULT: {
 						css: {
-							...markdownCommon,
+							...themeTokiwa,
+							...common,
+						},
+					},
+					dark: {
+						css: {
+							...themeStar,
+							...common,
 						},
 					},
 				};
 			}),
 		}
 	},
+	variants: {
+		extend: { typography: ["dark"] }
+	},
 	plugins: [
 		typography,
 	],

From 72b4fd25500b4dee3b79e844b83ceef177783556 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 13:51:46 -0700
Subject: [PATCH 07/14] feat: Style name heading and nav-link

---
 src/app.css                           |  6 ++++++
 src/lib/components/ThemeSwitch.svelte |  2 +-
 src/routes/+page.svelte               | 15 +++++++++------
 src/routes/Navbar.svelte              |  2 +-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index 80580bc..11d1545 100644
--- a/src/app.css
+++ b/src/app.css
@@ -37,6 +37,9 @@
     --ring: 20 14.3% 4.1%;
 
     --radius: 0.5rem;
+
+	 --name: theme('colors.java.800');
+	 --navlink: theme('colors.eucalyptus.400');
   }
 
   .dark {
@@ -68,6 +71,8 @@
     --destructive-foreground: 60 9.1% 97.8%;
 
     --ring: 24 5.7% 82.9%;
+	 --name: theme('colors.java.300');
+	 --navlink: theme('colors.eucalyptus.200');
   }
 }
 
@@ -107,6 +112,7 @@ a, button {
 	text-shadow: 0 0 5px;
 }
 .nav-link {
+	color: var(--navlink);
 	@apply text-lg;
 	font-weight: 500;
 	font-family: serif;
diff --git a/src/lib/components/ThemeSwitch.svelte b/src/lib/components/ThemeSwitch.svelte
index cd4f708..33288b7 100644
--- a/src/lib/components/ThemeSwitch.svelte
+++ b/src/lib/components/ThemeSwitch.svelte
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<button on:click={toggleTheme} aria-label="Toggle Theme">
+<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
 	{#if $theme === "tokiwa"}
 		<Sun />
 	{:else}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index db8f46d..419be02 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -51,15 +51,18 @@
 				 style="padding-bottom: {(1 - progress) * 50}vh"
 		>
 			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
-				<a href="#bio">Bio</a>
+				<a class="nav-link" href="#bio">Bio</a>
 				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				{#each routes as item}
 					{#if item.route !== "/"}
-						<a href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
+						<a
+							href={item.route}
+							class="nav-link"
+							class:disabled-link={item.disabled}>{item.name}</a>
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
-				<a class="icon" href="/rss.xml"><Rss /></a>
+				<a class="icon nav-link" href="/rss.xml"><Rss /></a>
 				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				<ThemeSwitch />
 			</div>
@@ -136,7 +139,7 @@
 		@apply bg-background;
 		@apply dark:bg-gray-800;
 		box-shadow:
-			0px -5px 10px 10px rgba(200,200,200,0.4);
+			0px -5px 10px 10px var(--foreground);
 	}
 	#bio {
 		max-width: max(50vw, 100vh);
@@ -149,14 +152,14 @@
 		font-family: serif;
 		font-size: min(10vw, 60px);
 		display: inline-block;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#avatar {
 		line-height: 0;
 		display: inline-block;
 		margin: 5px;
 		margin-right: auto;
-		border: 4px solid theme('colors.eucalyptus.500');
+		border: 1px solid var(--name);
 		border-radius: 50%;
 		aspect-ratio: 1;
 		max-width: 20%;
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 157c7d4..82e28ea 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -29,7 +29,7 @@
 		font-family: serif;
 		font-size: 3rem;
 		font-weight: normal;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#navbar {
 		display: flex;

From cd477d6b7a5048d49563704a68407948dbc23876 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 13:58:14 -0700
Subject: [PATCH 08/14] feat: Syntax highlighting via shiki

---
 package-lock.json  | 450 +++++++++++++++++++++++++++++++++++++++++++--
 package.json       |   1 +
 src/app.css        |   1 -
 src/style/code.css | 209 ---------------------
 svelte.config.js   |  16 +-
 5 files changed, 445 insertions(+), 232 deletions(-)
 delete mode 100644 src/style/code.css

diff --git a/package-lock.json b/package-lock.json
index 7868dda..4e980c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "chrysoblog",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "chrysoblog",
-			"version": "0.0.1",
+			"version": "0.0.2",
 			"dependencies": {
 				"@fortawesome/fontawesome-free": "^6.6.0",
 				"bits-ui": "^0.21.13",
@@ -15,6 +15,7 @@
 				"rehype-slug": "^6.0.0",
 				"remark-github-blockquote-alert": "^1.2.1",
 				"remark-toc": "^9.0.0",
+				"shiki": "^1.22.0",
 				"svelte-radix": "^1.1.1",
 				"tailwind-merge": "^2.5.2",
 				"tailwind-variants": "^0.2.1"
@@ -1019,6 +1020,57 @@
 				"win32"
 			]
 		},
+		"node_modules/@shikijs/core": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.0.tgz",
+			"integrity": "sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/engine-javascript": "1.22.0",
+				"@shikijs/engine-oniguruma": "1.22.0",
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4",
+				"hast-util-to-html": "^9.0.3"
+			}
+		},
+		"node_modules/@shikijs/engine-javascript": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.0.tgz",
+			"integrity": "sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"oniguruma-to-js": "0.4.3"
+			}
+		},
+		"node_modules/@shikijs/engine-oniguruma": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.0.tgz",
+			"integrity": "sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0"
+			}
+		},
+		"node_modules/@shikijs/types": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.0.tgz",
+			"integrity": "sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4"
+			}
+		},
+		"node_modules/@shikijs/vscode-textmate": {
+			"version": "9.3.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
+			"integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
+			"license": "MIT"
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "3.2.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.2.5.tgz",
@@ -1175,6 +1227,15 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/mdast": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/node": {
 			"version": "22.5.5",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
@@ -1806,6 +1867,16 @@
 				}
 			]
 		},
+		"node_modules/ccount": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+			"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/chai": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
@@ -1838,6 +1909,26 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/character-entities-html4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+			"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-legacy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+			"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/check-error": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -1917,6 +2008,16 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
 		},
+		"node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/commander": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2032,6 +2133,19 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2703,6 +2817,35 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-to-html": {
+			"version": "9.0.3",
+			"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+			"integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"ccount": "^2.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"stringify-entities": "^4.0.0",
+				"zwitch": "^2.0.4"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-html/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
 		"node_modules/hast-util-to-string": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
@@ -2716,6 +2859,29 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/html-void-elements": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/human-signals": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@@ -3041,6 +3207,27 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/mdast-util-to-hast": {
+			"version": "13.2.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+			"integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/mdast-util-toc": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-7.1.0.tgz",
@@ -3060,15 +3247,6 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
-		"node_modules/mdast-util-toc/node_modules/@types/mdast": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
-			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-			"license": "MIT",
-			"dependencies": {
-				"@types/unist": "*"
-			}
-		},
 		"node_modules/mdast-util-toc/node_modules/mdast-util-to-string": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
@@ -3173,6 +3351,95 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-encode": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+			"integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-sanitize-uri": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+			"integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+			"integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -3367,6 +3634,18 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/oniguruma-to-js": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
+			"integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
+			"license": "MIT",
+			"dependencies": {
+				"regex": "^4.3.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
 		"node_modules/optionator": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3893,6 +4172,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/property-information": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3952,6 +4241,12 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/regex": {
+			"version": "4.3.3",
+			"resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
+			"integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
+			"license": "MIT"
+		},
 		"node_modules/rehype-slug": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
@@ -3998,15 +4293,6 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
-		"node_modules/remark-toc/node_modules/@types/mdast": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
-			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-			"license": "MIT",
-			"dependencies": {
-				"@types/unist": "*"
-			}
-		},
 		"node_modules/resolve": {
 			"version": "1.22.8",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -4148,6 +4434,20 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/shiki": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.0.tgz",
+			"integrity": "sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/core": "1.22.0",
+				"@shikijs/engine-javascript": "1.22.0",
+				"@shikijs/engine-oniguruma": "1.22.0",
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4"
+			}
+		},
 		"node_modules/siginfo": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@@ -4187,6 +4487,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/stackback": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -4256,6 +4566,20 @@
 				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
 			}
 		},
+		"node_modules/stringify-entities": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+			"integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+			"license": "MIT",
+			"dependencies": {
+				"character-entities-html4": "^2.0.0",
+				"character-entities-legacy": "^3.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/strip-ansi": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4705,6 +5029,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/ts-api-utils": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -4806,6 +5140,25 @@
 			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
 			"license": "MIT"
 		},
+		"node_modules/unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-position/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
 		"node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -4905,6 +5258,20 @@
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
+		"node_modules/vfile": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+			"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vfile-message": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
@@ -4920,6 +5287,39 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/vfile/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
+		"node_modules/vfile/node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile/node_modules/vfile-message": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+			"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vite": {
 			"version": "5.4.6",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
@@ -5234,6 +5634,16 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index c7e3858..a77664f 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
 		"rehype-slug": "^6.0.0",
 		"remark-github-blockquote-alert": "^1.2.1",
 		"remark-toc": "^9.0.0",
+		"shiki": "^1.22.0",
 		"svelte-radix": "^1.1.1",
 		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1"
diff --git a/src/app.css b/src/app.css
index 11d1545..e30ce37 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,5 +1,4 @@
 @import url(./style/content.css);
-@import url(./style/code.css);
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 @tailwind base;
 @tailwind components;
diff --git a/src/style/code.css b/src/style/code.css
deleted file mode 100644
index 32f59e0..0000000
--- a/src/style/code.css
+++ /dev/null
@@ -1,209 +0,0 @@
-/* Adapted from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-light.css */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	color: #90a4ae;
-	background: #fafafa;
-	font-family: Roboto Mono, monospace;
-	font-size: 1em;
-	line-height: 1.5em;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-code[class*="language-"]::-moz-selection,
-pre[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection,
-pre[class*="language-"] ::-moz-selection {
-	background: #cceae7;
-	color: #263238;
-}
-
-code[class*="language-"]::selection,
-pre[class*="language-"]::selection,
-code[class*="language-"] ::selection,
-pre[class*="language-"] ::selection {
-	background: #cceae7;
-	color: #263238;
-}
-
-:not(pre) > code[class*="language-"] {
-	white-space: normal;
-	border-radius: 0.2em;
-	padding: 0.1em;
-}
-
-pre[class*="language-"] {
-	overflow: auto;
-	position: relative;
-	margin: 0.5em 0;
-	padding: 1.25em 1em;
-}
-
-.language-css > code,
-.language-sass > code,
-.language-scss > code {
-	color: #f76d47;
-}
-
-[class*="language-"] .namespace {
-	opacity: 0.7;
-}
-
-.token.atrule {
-	color: #7c4dff;
-}
-
-.token.attr-name {
-	color: #39adb5;
-}
-
-.token.attr-value {
-	color: #f6a434;
-}
-
-.token.attribute {
-	color: #f6a434;
-}
-
-.token.boolean {
-	color: #7c4dff;
-}
-
-.token.builtin {
-	color: #39adb5;
-}
-
-.token.cdata {
-	color: #39adb5;
-}
-
-.token.char {
-	color: #39adb5;
-}
-
-.token.class {
-	color: #39adb5;
-}
-
-.token.class-name {
-	color: #6182b8;
-}
-
-.token.comment {
-	color: #aabfc9;
-}
-
-.token.constant {
-	color: #7c4dff;
-}
-
-.token.deleted {
-	color: #e53935;
-}
-
-.token.doctype {
-	color: #aabfc9;
-}
-
-.token.entity {
-	color: #e53935;
-}
-
-.token.function {
-	color: #7c4dff;
-}
-
-.token.hexcode {
-	color: #f76d47;
-}
-
-.token.id {
-	color: #7c4dff;
-	font-weight: bold;
-}
-
-.token.important {
-	color: #7c4dff;
-	font-weight: bold;
-}
-
-.token.inserted {
-	color: #39adb5;
-}
-
-.token.keyword {
-	color: #7c4dff;
-}
-
-.token.number {
-	color: #f76d47;
-}
-
-.token.operator {
-	color: #39adb5;
-}
-
-.token.prolog {
-	color: #aabfc9;
-}
-
-.token.property {
-	color: #39adb5;
-}
-
-.token.pseudo-class {
-	color: #f6a434;
-}
-
-.token.pseudo-element {
-	color: #f6a434;
-}
-
-.token.punctuation {
-	color: #39adb5;
-}
-
-.token.regex {
-	color: #6182b8;
-}
-
-.token.selector {
-	color: #e53935;
-}
-
-.token.string {
-	color: #f6a434;
-}
-
-.token.symbol {
-	color: #7c4dff;
-}
-
-.token.tag {
-	color: #e53935;
-}
-
-.token.unit {
-	color: #f76d47;
-}
-
-.token.url {
-	color: #e53935;
-}
-
-.token.variable {
-	color: #e53935;
-}
diff --git a/svelte.config.js b/svelte.config.js
index 2ffb103..a0ac1de 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,11 +1,12 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { mdsvex } from 'mdsvex';
 import adapter from '@sveltejs/adapter-static';
 
+import { mdsvex, escapeSvelte } from 'mdsvex';
 import remarkAlert from './src/lib/markdown.js'
 import relativeImages from 'mdsvex-relative-images'
 import remarkToc from 'remark-toc'
 import rehypeSlug from 'rehype-slug'
+import { getHighlighter } from 'shiki'
 
 const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content";
 
@@ -23,7 +24,18 @@ const config = {
          ],
          rehypePlugins: [
             rehypeSlug,
-         ]
+         ],
+         highlight: {
+		      highlighter: async (code, lang = 'text') => {
+			      const highlighter = await getHighlighter({
+				      themes: ['poimandres'],
+				      langs: ['rust', 'nix', "lean", "python"]
+			      })
+			      await highlighter.loadLanguage('rust', 'nix', 'lean', 'python')
+			      const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'poimandres' }))
+			      return `{@html \`${html}\` }`
+		      }
+	      },
       }),
       vitePreprocess(),
    ],

From 8632ae7a795a75f758f7d986673731aa15283892 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 18:59:02 -0700
Subject: [PATCH 09/14] feat: Light and dark themes

---
 src/app.css      | 10 ++++++++++
 svelte.config.js | 25 +++++++++++++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index e30ce37..e302cbc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -157,3 +157,13 @@ a.current-link {
 		color: theme('colors.magenta.500');
 	}
 }
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
diff --git a/svelte.config.js b/svelte.config.js
index a0ac1de..242dc27 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -10,6 +10,19 @@ import { getHighlighter } from 'shiki'
 
 const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content";
 
+const langs = [
+   "rust",
+   "nix",
+   "python",
+   "lean",
+   "javascript",
+   "typescript",
+];
+const highlightingThemes = {
+   light: 'solarized-light',
+   dark: 'andromeeda',
+};
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -27,12 +40,16 @@ const config = {
          ],
          highlight: {
 		      highlighter: async (code, lang = 'text') => {
+               const themes = Object.keys(highlightingThemes).map(function(k){ return highlightingThemes[k] });
 			      const highlighter = await getHighlighter({
-				      themes: ['poimandres'],
-				      langs: ['rust', 'nix', "lean", "python"]
+                  themes,
+				      langs,
 			      })
-			      await highlighter.loadLanguage('rust', 'nix', 'lean', 'python')
-			      const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'poimandres' }))
+			      await highlighter.loadLanguage(...langs);
+			      const html = escapeSvelte(highlighter.codeToHtml(code, {
+                  lang,
+                  themes: highlightingThemes,
+               }))
 			      return `{@html \`${html}\` }`
 		      }
 	      },

From 3a8a9c81055aeef7ff75026cde3092220bd8da28 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 19:14:27 -0700
Subject: [PATCH 10/14] fix: Blockquote themes

---
 src/content/home.md                        |  2 +-
 src/content/post/the-perfect-math-class.md | 10 ++++++++++
 src/style/content.css                      |  1 -
 svelte.config.js                           |  4 ++--
 tailwind.config.ts                         |  6 ++++++
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/content/home.md b/src/content/home.md
index fbed528..b91bdc3 100644
--- a/src/content/home.md
+++ b/src/content/home.md
@@ -17,7 +17,7 @@ Strongest of Gensokyo
 
 # Projects
 
-> This is a quote
+> People say nothing is impossible but I do nothing everyday. -- Winnie The Pooh
 
 ```python
 for i in range(9):
diff --git a/src/content/post/the-perfect-math-class.md b/src/content/post/the-perfect-math-class.md
index 113e322..f50b7cd 100644
--- a/src/content/post/the-perfect-math-class.md
+++ b/src/content/post/the-perfect-math-class.md
@@ -6,3 +6,13 @@ tags: ["Cirno"]
 # Content
 
 Here are some contents for the perfect math class. [A link](https://example.com)
+
+```lean
+theorem perfect_number_theorem (n: Nat),
+	Nat.is_odd → ¬perfect n := by
+	intro h
+	apply cirno_theorem
+```
+
+> :>WARNING
+> The proof is elusive!
diff --git a/src/style/content.css b/src/style/content.css
index 375b3c1..a06e165 100644
--- a/src/style/content.css
+++ b/src/style/content.css
@@ -1,5 +1,4 @@
 blockquote {
-    background: #fafaee;
     font-style: italic;
 }
 
diff --git a/svelte.config.js b/svelte.config.js
index 242dc27..e9e218d 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -19,8 +19,8 @@ const langs = [
    "typescript",
 ];
 const highlightingThemes = {
-   light: 'solarized-light',
-   dark: 'andromeeda',
+   light: 'vitesse-light',
+   dark: 'vitesse-dark',
 };
 
 /** @type {import('@sveltejs/kit').Config} */
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b162b49..f412e22 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -139,6 +139,9 @@ const config: Config = {
 							color: theme('colors.java.500'),
 						},
 					},
+					blockquote: {
+						color: theme('colors.gray.800'),
+					}
 				};
 				const themeStar = {
 					color: theme('colors.gray.200'),
@@ -160,6 +163,9 @@ const config: Config = {
 							color: theme('colors.java.500'),
 						},
 					},
+					blockquote: {
+						color: theme('colors.gray.300'),
+					}
 				};
 
 				return {

From 581c122c8256ba9270a2315ac9b506d6d57d4af6 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 19:16:20 -0700
Subject: [PATCH 11/14] fix: Theme switch --navlink colour

---
 src/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index e302cbc..158009e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -110,7 +110,7 @@ a, button {
 .dark a:not(.disabled-link),button {
 	text-shadow: 0 0 5px;
 }
-.nav-link {
+.nav-link, .nav-link * {
 	color: var(--navlink);
 	@apply text-lg;
 	font-weight: 500;

From 571d54a975d987b5117f523496296563266a9fc3 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 19:20:08 -0700
Subject: [PATCH 12/14] fix: Call `setTheme` function

---
 src/lib/components/ThemeSwitch.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ThemeSwitch.svelte b/src/lib/components/ThemeSwitch.svelte
index 33288b7..e85832e 100644
--- a/src/lib/components/ThemeSwitch.svelte
+++ b/src/lib/components/ThemeSwitch.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Moon, Sun } from 'lucide-svelte';
-	import { theme } from '$lib/theme'
+	import { theme, setTheme } from '$lib/theme'
 
 	function toggleTheme() {
 		theme.update((currentTheme) => {
@@ -14,6 +14,7 @@
 			} else {
 				document.documentElement.classList.add('dark');
 			}
+			setTheme(newTheme);
 			return newTheme
 		})
 	}

From ac0d9a5a030c5eb1bbc493f26b13b1c126e02a3e Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 19:27:40 -0700
Subject: [PATCH 13/14] feat: Cache shiki instance; Add more languages

---
 svelte.config.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/svelte.config.js b/svelte.config.js
index e9e218d..9820d65 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,18 +11,31 @@ import { getHighlighter } from 'shiki'
 const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content";
 
 const langs = [
-   "rust",
+   "javascript",
+   "lean",
+   "lisp",
    "nix",
    "python",
-   "lean",
-   "javascript",
+   "rust",
+   "toml",
    "typescript",
+   "yaml",
+   "c",
+   "c++",
+   "sh",
 ];
 const highlightingThemes = {
    light: 'vitesse-light',
    dark: 'vitesse-dark',
 };
 
+const themes = Object.keys(highlightingThemes).map(function(k){ return highlightingThemes[k] });
+const highlighter = await getHighlighter({
+   themes,
+   langs,
+})
+await highlighter.loadLanguage(...langs);
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -40,12 +53,6 @@ const config = {
          ],
          highlight: {
 		      highlighter: async (code, lang = 'text') => {
-               const themes = Object.keys(highlightingThemes).map(function(k){ return highlightingThemes[k] });
-			      const highlighter = await getHighlighter({
-                  themes,
-				      langs,
-			      })
-			      await highlighter.loadLanguage(...langs);
 			      const html = escapeSvelte(highlighter.codeToHtml(code, {
                   lang,
                   themes: highlightingThemes,

From 6bda82321ba380e13998e1247cbc5065dda34bdb Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 19:28:58 -0700
Subject: [PATCH 14/14] fix: Dark mode highlighting of code

---
 tailwind.config.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index f412e22..7a0263f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -141,7 +141,10 @@ const config: Config = {
 					},
 					blockquote: {
 						color: theme('colors.gray.800'),
-					}
+					},
+					code: {
+						color: theme('colors.gray.800'),
+					},
 				};
 				const themeStar = {
 					color: theme('colors.gray.200'),
@@ -165,7 +168,10 @@ const config: Config = {
 					},
 					blockquote: {
 						color: theme('colors.gray.300'),
-					}
+					},
+					code: {
+						color: theme('colors.gray.300'),
+					},
 				};
 
 				return {