feat: prism highlighting

components/BlogPreviewList.css

@@ -6,9 +6,13 @@
   margin-top: 1rem;
 }
 
+.post {
+  list-style: none;
+}
+
 .meta {
   display: block;
   font-size: 0.9rem;
   color: var(--neutral-800);
   white-space: pre-wrap;
-}
+}

components/BlogPreviewList.tsx

@@ -12,13 +12,16 @@ export function BlogPreviewList() {
   return (
     <ul class={classes.list}>
       {allPosts.slice(0, 5).map((post) => (
-        <div class={classes.post}>
+        <li class={classes.post}>
           <a href={href(post.file)}>{post.meta.title}</a>
           <time datetime={post.meta.date.toString()} class={classes.meta}>
             {post.meta.date.toLocaleString("sv-SE")}
           </time>
-        </div>
+        </li>
       ))}
+      <a href="/blog">
+        View all posts
+      </a>
     </ul>
   );
 }

components/Markdown.css

@@ -1,11 +1,11 @@
 .markdown {
   word-wrap: break-word;
 
-  > *:first-child {
+  >*:first-child {
     margin-top: 0 !important;
   }
 
-  > *:last-child {
+  >*:last-child {
     margin-bottom: 0 !important;
   }
 
@@ -39,14 +39,46 @@
     margin-left: 2rem;
   }
 
-  p > code {
-    background-color: var(--neutral-100);
-    outline: 0.15em solid var(--neutral-100);
+  p>code {
+    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 marked = new Marked(markedHighlight({
+  emptyLangClass: "language-none",
+  langPrefix: "language-",
+  highlight(code, lang, _info) {
+    const languageAliases: Record<string, string> = {
+      rs: "rust",
+      console: "sh"
+    };
+    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/[email protected]/mod.ts",
     "lightningcss": "npm:lightningcss@^1.27.0",
     "marked": "npm:marked@^14.1.2",
+    "marked-highlight": "npm:[email protected]",
     "octokit": "npm:[email protected]",
     "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,
       }),
     );
   }