From 373d2d165b16f2b85044b20c1fb8ef69062261e4 Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Fri, 12 Apr 2024 23:44:39 -0700 Subject: [PATCH] feat: add syntax highlighting for code --- blog/2024/taylor-series/content.md | 4 ++++ blog/2024/taylor-series/post.toml | 8 ++++++++ blog/2024/test-post/post.toml | 1 + package.json | 1 + pnpm-lock.yaml | 26 ++++++++++++++++++++++++++ post.schema.json | 23 ++++++++++++++++++++++- src/globals.d.ts | 6 ++++++ src/lib/styles/markdown.pcss | 3 +++ src/lib/utils/parseMarkdown.ts | 2 ++ src/routes/blog/[...slug]/+page.svelte | 16 ++++++++++++++-- 10 files changed, 87 insertions(+), 3 deletions(-) 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 + +