feat: add syntax highlighting for code

blog/2024/taylor-series/content.md

@@ -147,3 +147,7 @@ If $\displaystyle\frac{e}{(n+1)!} \le \frac{1}{1000000}$, we're all set.
 Assume that $e \le 3$, which implies that if $\displaystyle\frac{3}{(n+1)!} \le \frac{1}{1000000}$, we're all set.
 After trying terms, we find that $n=9$ works.
 So $P_9(1) = 1 + 1 + \frac{1}{2!} + \frac{1}{3!} + \dots + \frac{1}{9!}$ is within $\frac{1}{1000000}$ of $e$.
+
+```rust
+let mut var: u32 = 10030;
+```

blog/2024/taylor-series/post.toml

@@ -8,6 +8,7 @@ blurb = "The essence of calculus."
 description = "A brief introduction to Taylor series, a powerful tool in calculus. We will discuss the intuition behind Taylor series, how to derive them, and how to use them to approximate functions. We will also discuss the limitations of Taylor series and how to overcome them. This article is aimed at beginners who are interested in calculus and want to learn more about Taylor series."
 type = "article"
 authors = ["Youwen Wu"]
+highlight = true
 
 [manifest.tags]
 primary = ["math", "calculus"]
@@ -17,3 +18,10 @@ secondary = ["taylor series", "numerical methods", "approximation"]
 src = "https://i.ytimg.com/vi/3d6DsjIBzJ4/maxresdefault.jpg"
 alt = "visual of taylor series for a quadratic function"
 caption = "Taylor series approximation of a quadratic function."
+
+[deps]
+
+[deps.external]
+styles = [
+  "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/rust.min.js",
+]

blog/2024/test-post/post.toml

@@ -7,6 +7,7 @@ authors = ["Youwen Wu"]
 blurb = "A blog post about Rust and WebAssembly"
 description = "A blog post about Rust and WebAssembly, and how to use it in web development. This post will cover the basics of Rust and WebAssembly, and how to use it in web development. We will also discuss the benefits of using Rust and WebAssembly, and how it can help you build faster and more efficient web applications."
 type = "article"
+highlight = false
 
 [manifest.tags]
 primary = ["Rust", "WebAssembly"]

package.json

@@ -54,6 +54,7 @@
 		"coredump": "link:",
 		"dayjs": "^1.11.10",
 		"mode-watcher": "^0.3.0",
+		"rehype-highlight": "^7.0.0",
 		"rehype-katex": "^7.0.0",
 		"rehype-stringify": "^10.0.0",
 		"remark-gfm": "^4.0.0",

pnpm-lock.yaml

@@ -41,6 +41,9 @@ dependencies:
   mode-watcher:
     specifier: ^0.3.0
     version: 0.3.0(svelte@4.2.12)
+  rehype-highlight:
+    specifier: ^7.0.0
+    version: 7.0.0
   rehype-katex:
     specifier: ^7.0.0
     version: 7.0.0
@@ -2204,6 +2207,11 @@ packages:
       space-separated-tokens: 2.0.2
     dev: false
 
+  /highlight.js@11.9.0:
+    resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   /html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
     dev: false
@@ -2384,6 +2392,14 @@ packages:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
     dev: false
 
+  /lowlight@3.1.0:
+    resolution: {integrity: sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==}
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      highlight.js: 11.9.0
+    dev: false
+
   /lru-cache@10.2.0:
     resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
     engines: {node: 14 || >=16.14}
@@ -3260,6 +3276,16 @@ packages:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
     dev: false
 
+  /rehype-highlight@7.0.0:
+    resolution: {integrity: sha512-QtobgRgYoQaK6p1eSr2SD1i61f7bjF2kZHAQHxeCHAuJf7ZUDMvQ7owDq9YTkmar5m5TSUol+2D3bp3KfJf/oA==}
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-text: 4.0.0
+      lowlight: 3.1.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+    dev: false
+
   /rehype-katex@7.0.0:
     resolution: {integrity: sha512-h8FPkGE00r2XKU+/acgqwWUlyzve1IiOKwsEkg4pDL3k48PiE0Pt+/uLtVHDVkN1yA4iurZN6UES8ivHVEQV6Q==}
     dependencies:

post.schema.json

@@ -65,5 +65,26 @@
 			"required": ["src", "alt", "caption"]
 		}
 	},
-	"required": ["title", "manifest", "cover"]
+	"required": ["title", "manifest", "cover"],
+	"optional": {
+		"type": "object",
+		"properties": {
+			"deps": {
+				"type": "object",
+				"properties": {
+					"external": {
+						"type": "object",
+						"properties": {
+							"styles": {
+								"type": "array",
+								"items": {
+									"type": "string"
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 }

src/globals.d.ts

@@ -20,10 +20,16 @@ type PostMeta = {
 		tags: { primary: string[]; secondary: string[] };
 		blurb: string;
 		description: string;
+		highlight: boolean;
 	};
 	cover: {
 		src: string;
 		alt: string;
 		caption: string;
 	};
+	deps?: {
+		external?: {
+			styles?: string[];
+		};
+	};
 };

src/lib/styles/markdown.pcss

@@ -161,4 +161,7 @@
 		width: 1em;
 		height: 1em;
 	}
+	.hljs {
+		@apply mx-2 my-4 rounded-xl shadow-lg;
+	}
 }

src/lib/utils/parseMarkdown.ts

@@ -7,6 +7,7 @@ import remarkRehype from 'remark-rehype';
 import remarkGfm from 'remark-gfm';
 import remarkGhAlerts from 'remark-gh-alerts';
 import remarkSectionize from 'remark-sectionize';
+import rehypeHighlight from 'rehype-highlight';
 
 export default async (markdown: string) => {
 	try {
@@ -19,6 +20,7 @@ export default async (markdown: string) => {
 				.use(remarkMath)
 				.use(remarkRehype)
 				.use(rehypeKatex)
+				.use(rehypeHighlight)
 				.use(rehypeStringify)
 				.process(markdown)
 		);

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

@@ -6,6 +6,7 @@
 	import TocHeader from '$lib/components/Toc/TocHeader.svelte';
 	import '$lib/styles/katex.css';
 	import '$lib/styles/markdown.pcss';
+	import { onMount } from 'svelte';
 
 	const tocStore = createTocStore();
 
@@ -22,14 +23,25 @@
 		slug: data.slug,
 		image: data.metadata.cover
 	};
-	// $: doc = data.metadata;
+
-	// $: componentSource = data.metadata.source?.replace('default', $config.style ?? 'default');
+	onMount(() => {
+		console.log(data.metadata.deps);
+		console.log(data.metadata);
+	});
 </script>
 
 <svelte:head>
 	<title>{doc.title} | The Coredump</title>
 	<meta name="description" content={doc.description} />
 	<meta name="author" content="Youwen Wu" />
+
+	<link
+		rel="stylesheet"
+		href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css"
+		integrity="sha512-dSQLLtgaq2iGigmy9xowRshaMzUHeiIUTvJW/SkUpb1J+ImXOPNGAI7ZC8V5/PiN/XN83B8uIk4qET7AMhdC5Q=="
+		crossorigin="anonymous"
+		referrerpolicy="no-referrer"
+	/>
 </svelte:head>
 
 <TocHeader {tocStore} placeholder="On this page" />