feat: switch markdown parser to remark + friends

package.json

@@ -52,14 +52,19 @@
 		"bits-ui": "^0.21.2",
 		"clsx": "^2.1.0",
 		"dayjs": "^1.11.10",
-    "marked": "^12.0.1",
-    "marked-alert": "^2.0.1",
-    "marked-katex-extension": "^5.0.1",
 		"mode-watcher": "^0.3.0",
+		"rehype-katex": "^7.0.0",
+		"rehype-stringify": "^10.0.0",
+		"remark-gfm": "^4.0.0",
+		"remark-gh-alerts": "^0.0.3",
+		"remark-math": "^6.0.0",
+		"remark-parse": "^11.0.0",
+		"remark-rehype": "^11.1.0",
 		"svelte-radix": "^1.1.0",
 		"svelte-sonner": "^0.3.21",
 		"tailwind-merge": "^2.2.2",
 		"tailwind-variants": "^0.2.1",
+		"unified": "^11.0.4",
 		"vaul-svelte": "^0.3.0"
 	},
 	"packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"

src/lib/components/Blog/Article.svelte

@@ -32,7 +32,7 @@
 		<slot name="mobile-toc" />
 	</header>
 
-	<div class="markdown-body mt-8 font-serif">
+	<div class="markdown-body my-8 font-serif">
 		{@html doc.content}
 	</div>
 </article>

src/lib/styles/markdown.css

@@ -46,10 +46,8 @@
 		padding: 0.5em;
 	}
 
-	blockquote {
+	blockquote:not(.markdown-alert) {
-		padding-left: 1em;
+		@apply border-l-2 border-l-muted-foreground my-4 pl-4 italic;
-		font-style: italic;
-		border-left: solid 1px #fa6432;
 	}
 
 	table {
@@ -115,7 +113,7 @@
 		@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
 	}
 	.markdown-alert-title {
-		@apply flex items-center font-medium text-xl font-sans;
+		@apply font-medium text-xl font-sans;
 	}
 	.markdown-alert-caution > .markdown-alert-title {
 		@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
@@ -147,4 +145,19 @@
 	.markdown-alert-warning > .markdown-alert-title {
 		@apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
 	}
+	.markdown-alert .markdown-alert-title .octicon {
+		margin-right: 0.5rem;
+		overflow: visible !important;
+
+		-webkit-mask: var(--oct-icon) no-repeat;
+		mask: var(--oct-icon) no-repeat;
+		-webkit-mask-size: 100% 100%;
+		mask-size: 100% 100%;
+		background-color: currentColor;
+		color: inherit;
+		display: inline-block;
+		vertical-align: -0.125em;
+		width: 1em;
+		height: 1em;
+	}
 }

src/routes/blog/[year]/[slug]/+page.svelte

@@ -4,7 +4,6 @@
 	import Article from '$lib/components/Blog/Article.svelte';
 	import { toc, createTocStore } from '@svelte-put/toc';
 	import StickyToc from '$lib/components/Toc/StickyToc.svelte';
-
 	const tocStore = createTocStore();
 
 	export let data: PageData;
@@ -14,7 +13,7 @@
 		primaryTags: ['Computer Science', 'Mathematics'],
 		secondaryTags: ['Calculus', 'Taylor Series'],
 		time: Date.now() / 1000,
-		content: data.markdown,
+		content: data.content!,
 		blurb: 'A short and succinct, yet descriptive blurb about the post.',
 		description:
 			'An insightful and longer description of the post. This should be a bit more detailed than the blurb. It should give the reader a good idea of what the post is about.'

src/routes/blog/[year]/[slug]/+page.ts

@@ -1,24 +1,34 @@
 import type { PageLoad } from './$types.js';
-import { marked } from 'marked';
+import { unified } from 'unified';
-import markedKatex from 'marked-katex-extension';
+import rehypeKatex from 'rehype-katex';
-import markedAlert from 'marked-alert';
+import rehypeStringify from 'rehype-stringify';
+import remarkMath from 'remark-math';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import remarkGfm from 'remark-gfm';
+import remarkGhAlerts from 'remark-gh-alerts';
 
 export const prerender = true;
 
-const options = {
-	throwOnError: false
-};
-
-marked.use(markedKatex(options));
-marked.use(markedAlert());
-
 export const load: PageLoad = async ({ fetch }) => {
 	try {
 		const data = await fetch('/test.md');
-		const markdown = await marked.parse(await data.text());
+		const content = String(
+			await unified()
+				.use(remarkParse)
+				.use(remarkGfm)
+				.use(remarkGhAlerts)
+				.use(remarkMath)
+				.use(remarkRehype)
+				.use(rehypeKatex)
+				.use(rehypeStringify)
+				.process(await data.text())
+		);
+
+		if (typeof content === 'undefined') throw new Error('No content');
 
 		return {
-			markdown
+			content
 		};
 	} catch (e) {
 		return {