feat: prism highlighting

components/BlogPreviewList.css

@@ -15,4 +15,4 @@
   font-size: 0.9rem;
   color: var(--neutral-800);
   white-space: pre-wrap;
-}
+}

components/Markdown.css

@@ -40,13 +40,45 @@
   }
 
   p > code {
-    background-color: var(--neutral-100);
-    outline: 0.15em solid var(--neutral-100);
+    background-color: light-dark(hsl(230, 1%, 98%), hsl(220, 13%, 18%));
+    outline: 0.15em solid light-dark(hsl(230, 1%, 98%), hsl(220, 13%, 18%));
   }
 
   pre:has(code) {
-    outline: 1rem solid var(--neutral-100);
-    background-color: var(--neutral-100);
+    outline: 1rem solid light-dark(hsl(230, 1%, 98%), hsl(220, 13%, 18%));
+    background-color: light-dark(hsl(230, 1%, 98%), hsl(220, 13%, 18%));
     overflow: auto;
   }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-button:start:decrement,
+  ::-webkit-scrollbar-button:end:increment {
+    display: block;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-button:vertical:increment {
+    background-color: var(--neutral-400);
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    background-color: var(--neutral-400);
+    -webkit-border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:vertical {
+    height: 50px;
+    background-color: var(--neutral-400);
+    -webkit-border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:horizontal {
+    width: 50px;
+    background-color: var(--neutral-400);
+    -webkit-border-radius: 3px;
+  }
 }

components/Markdown.tsx

@@ -1,8 +1,32 @@
-import * as marked from "marked";
-
+import { Marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import Prism from "prismjs";
+import "prismjs/components/prism-bash.min.js";
+import "prismjs/components/prism-javascript.min.js";
+import "prismjs/components/prism-typescript.min.js";
+import "prismjs/components/prism-css.min.js";
+import "prismjs/components/prism-json.min.js";
+import "prismjs/components/prism-jsx.min.js";
+import "prismjs/components/prism-tsx.min.js";
+import "prismjs/components/prism-rust.min.js";
 import { css } from "utils/css.ts";
 import clsx from "clsx";
 
+const languageAliases: Record<string, string> = {
+  rs: "rust",
+  console: "sh",
+};
+
+const marked = new Marked(markedHighlight({
+  emptyLangClass: "language-none",
+  langPrefix: "language-",
+  highlight(code, lang, _info) {
+    lang = languageAliases[lang] ?? lang;
+    const language = Prism.languages[lang] ?? Prism.languages.autoit;
+    return Prism.highlight(code, language, lang);
+  },
+}));
+
 const classes = await css(import.meta.resolve("./Markdown.css"));
 
 export interface MarkdownProps {

deno.json

@@ -18,8 +18,10 @@
     "fresh_charts": "https://deno.land/x/fresh_charts@0.3.1/mod.ts",
     "lightningcss": "npm:lightningcss@^1.27.0",
     "marked": "npm:marked@^14.1.2",
+    "marked-highlight": "npm:marked-highlight@2.2.1",
     "octokit": "npm:octokit@4.0.2",
     "preact": "npm:preact@^10.24.0",
+    "prismjs": "npm:prismjs@^1.29.0",
     "preact-render-to-string": "npm:preact-render-to-string@^6.5.11",
     "utils/": "./utils/"
   },

pages/blog/post.tsx

@@ -26,6 +26,7 @@ if (import.meta.main) {
         description: post.meta.description,
         author: post.meta.authors.map((author) => author.name).join(", "),
         canonical: href(post.file),
+        highlight: true,
       }),
     );
   }