diff --git a/blog/2024/taylor-series/content.md b/blog/2024/taylor-series/content.md
index 06c2ce2..a395026 100644
--- a/blog/2024/taylor-series/content.md
+++ b/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;
+```
diff --git a/blog/2024/taylor-series/post.toml b/blog/2024/taylor-series/post.toml
index 2e17c2f..ce4a2d9 100644
--- a/blog/2024/taylor-series/post.toml
+++ b/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",
+]
diff --git a/blog/2024/test-post/post.toml b/blog/2024/test-post/post.toml
index c66b4a1..0fd352e 100644
--- a/blog/2024/test-post/post.toml
+++ b/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"]
diff --git a/package.json b/package.json
index d21e531..6d2119a 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 91a5e72..bdd7341 100644
--- a/pnpm-lock.yaml
+++ b/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:
diff --git a/post.schema.json b/post.schema.json
index 3e9ae47..7b08993 100644
--- a/post.schema.json
+++ b/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"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/src/globals.d.ts b/src/globals.d.ts
index b1897ac..bb8b530 100644
--- a/src/globals.d.ts
+++ b/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[];
+ };
+ };
};
diff --git a/src/lib/styles/markdown.pcss b/src/lib/styles/markdown.pcss
index 947a0c6..a040999 100644
--- a/src/lib/styles/markdown.pcss
+++ b/src/lib/styles/markdown.pcss
@@ -161,4 +161,7 @@
width: 1em;
height: 1em;
}
+ .hljs {
+ @apply mx-2 my-4 rounded-xl shadow-lg;
+ }
}
diff --git a/src/lib/utils/parseMarkdown.ts b/src/lib/utils/parseMarkdown.ts
index 103f33f..a45a3be 100644
--- a/src/lib/utils/parseMarkdown.ts
+++ b/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)
);
diff --git a/src/routes/blog/[...slug]/+page.svelte b/src/routes/blog/[...slug]/+page.svelte
index 3914641..71dde4e 100644
--- a/src/routes/blog/[...slug]/+page.svelte
+++ b/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);
+ });
{doc.title} | The Coredump
+
+