diff --git a/package-lock.json b/package-lock.json
index 2b338f5..d615443 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "website-frontend",
"version": "0.0.1",
"dependencies": {
+ "highlight.js": "^11.10.0",
"marked": "^13.0.2",
"moment": "^2.30.1",
"qs": "^6.12.2",
@@ -1028,6 +1029,14 @@
"node": ">= 0.4"
}
},
+ "node_modules/highlight.js": {
+ "version": "11.10.0",
+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+ "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
"node_modules/immutable": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
diff --git a/package.json b/package.json
index 59f22a9..edd5fe7 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
},
"type": "module",
"dependencies": {
+ "highlight.js": "^11.10.0",
"marked": "^13.0.2",
"moment": "^2.30.1",
"qs": "^6.12.2",
diff --git a/src/components/atoms/Box.svelte b/src/components/atoms/Box.svelte
index 5b595f7..63ccb2a 100644
--- a/src/components/atoms/Box.svelte
+++ b/src/components/atoms/Box.svelte
@@ -1,19 +1,19 @@
+ import type { Snippet } from "svelte";
+
+ type Props = {
+ children: Snippet;
+ depth: number;
+ };
+
+ const { children, depth }: Props = $props();
+ if (depth < 0 || depth > 6) {
+ throw new Error("depth must be 0-6");
+ }
+
+
+
+ {@render children()}
+
+
+
diff --git a/src/components/atoms/HighlightedCode.svelte b/src/components/atoms/HighlightedCode.svelte
new file mode 100644
index 0000000..bd27ed5
--- /dev/null
+++ b/src/components/atoms/HighlightedCode.svelte
@@ -0,0 +1,31 @@
+
+
+
+{@html html}
+
+
+
diff --git a/src/components/atoms/List.svelte b/src/components/atoms/List.svelte
new file mode 100644
index 0000000..3f18490
--- /dev/null
+++ b/src/components/atoms/List.svelte
@@ -0,0 +1,30 @@
+
+
+{#if ordered}
+
+ {@render children()}
+
+{:else}
+
+{/if}
+
+
diff --git a/src/components/atoms/ListItem.svelte b/src/components/atoms/ListItem.svelte
new file mode 100644
index 0000000..14c7850
--- /dev/null
+++ b/src/components/atoms/ListItem.svelte
@@ -0,0 +1,13 @@
+
+
+
+ {@render children()}
+
diff --git a/src/components/atoms/Paragraph.svelte b/src/components/atoms/Paragraph.svelte
new file mode 100644
index 0000000..599fd5c
--- /dev/null
+++ b/src/components/atoms/Paragraph.svelte
@@ -0,0 +1,22 @@
+
+
+
+ {@render children()}
+
+
+
diff --git a/src/components/atoms/Space.svelte b/src/components/atoms/Space.svelte
new file mode 100644
index 0000000..18bff36
--- /dev/null
+++ b/src/components/atoms/Space.svelte
@@ -0,0 +1,10 @@
+
+
+
diff --git a/src/components/molecules/Markdown.svelte b/src/components/molecules/Markdown.svelte
index 1172a27..b98bafb 100644
--- a/src/components/molecules/Markdown.svelte
+++ b/src/components/molecules/Markdown.svelte
@@ -1,5 +1,11 @@
+{#snippet markdownToken(token)}
+ {#if token.type === "text"}
+ {token.text}
+ {:else if token.type === "heading"}
+
+ {token.text}
+
+ {:else if token.type === "paragraph"}
+
+ {token.text}
+
+ {:else if token.type === "code"}
+
+ {:else if token.type === "space"}
+
+ {:else if token.type === "list"}
+
+ {#each token.items as item}
+ {@render markdownToken(item)}
+ {/each}
+
+ {:else if token.type === "list_item"}
+
+ {#each token.tokens as itemToken}
+ {@render markdownToken(itemToken)}
+ {/each}
+
+ {:else}
+
{JSON.stringify(token, null, 2)}
+ {/if}
+{/snippet}
+
- {@html markdownHtml}
+ {#each markdownTokens as token}
+ {@render markdownToken(token)}
+ {/each}
diff --git a/src/global.scss b/src/global.scss
index 09fa01e..8a9b5a6 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -45,9 +45,11 @@
--color-yellow: #f1fa8c;
--color-image-frame: #fff;
--color-image-frame-text: #204;
+ --color-context: var(--color-primary);
--font-primary: Manifold, Lexend, Arial, Helvetica, sans-serif;
--font-readable: "3270", Lexend, Arial, Helvetica, sans-serif;
+ --font-monospace: Fira Code, monospace;
--font-page-title: GradientVector, Manifold, Lexend, Arial, Helvetica, sans-serif;
}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1ff66bc..59fff77 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -48,8 +48,3 @@
{/snippet}
-
-