Add highlight.js plugin for syntax highlighting

Updated a bunch of styling to accomodate the new plugin.

_config.ts

@@ -3,6 +3,11 @@ import jsx from "lume/plugins/jsx.ts";
 import nav from "lume/plugins/nav.ts";
 import sass from "lume/plugins/sass.ts";
 import feed from "lume/plugins/feed.ts";
+import code_highlight from "lume/plugins/code_highlight.ts";
+
+import lang_typescript from "npm:highlight.js/lib/languages/typescript";
+import lang_javascript from "npm:highlight.js/lib/languages/javascript";
+import lang_bash from "npm:highlight.js/lib/languages/bash";
 
 const site = lume({
   location: new URL("https://www.fosterhangdaan.com/"),
@@ -37,5 +42,12 @@ site.use(feed({
     description: "=description",
   }
 }));
+site.use(code_highlight({
+  languages: {
+    typescript: lang_typescript,
+    javascript: lang_javascript,
+    bash: lang_bash,
+  }
+}));
 
 export default site;

_includes/styles/base.scss

@@ -104,16 +104,16 @@ code {
 pre {
   margin-top: 1rem;
   margin-bottom: 1rem;
-  padding: 1rem;
   border-radius: 5px;
   display: block;
-  background-color: var(--color-bg--layer-01);
   overflow: auto;
   page-break-inside: avoid;
   word-wrap: break-word;
   font-family: var(--font--mono);
-  line-height: 1.4;
+  line-height: 1.5;
+  background-color: var(--color-bg--layer-01);
   code {
+    background-color: transparent !important;
     font-size: 1rem;
     padding: 0;
     border-radius: 0;

_includes/styles/color-palette.scss

@@ -1,3 +1,7 @@
+/* Tokyo Night styles for highlight.js */
+@import "https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.css";
+@import "https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.css" (prefers-color-scheme: light);
+
 /* Tokyo night color palette */
 :root {
   /* Dark Theme */
@@ -102,7 +106,11 @@ :root {
   --tn-light--filter-13: invert(3%) sepia(3%) saturate(6957%) hue-rotate(202deg) brightness(93%) contrast(94%);
   --tn-light--filter-14: invert(65%) sepia(13%) saturate(196%) hue-rotate(189deg) brightness(92%) contrast(87%);
   --tn-light--filter-15: invert(94%) sepia(7%) saturate(122%) hue-rotate(193deg) brightness(92%) contrast(90%);
-  --tn-light--background-50: #d5d6db;
+  --tn-light--background-10: #e1e2e6;
+  --tn-light--background-20: #dfdfe3;
+  --tn-light--background-30: #dcdce1;
+  --tn-light--background-40: #d9dade;
+  --tn-light--background-50: var(--tn-light--15);
   --tn-light--background-60: #c5c6ce;
   --tn-light--background-70: #b4b6bf;
   --tn-light--background-80: #a4a6b1;
@@ -148,8 +156,8 @@ :root {
   --color-error: var(--color-red);
   --color-success: var(--tn-dark--04);
   --color-warn: var(--color-yellow);
-  --color-bg--layer-01: var(--tn-storm--background-40);
-  --color-bg--layer-02: var(--tn-storm--background-30);
+  --color-bg--layer-01: var(--tn-storm--background-50);
+  --color-bg--layer-02: var(--tn-storm--background-40);
   --color-headings: var(--color-cyan);
   --color-table-stripe: var(--tn-night--background-40);
   --filter-black: var(--tn-dark--filter-16);
@@ -181,8 +189,8 @@ @media (prefers-color-scheme: light) {
     --color-error: var(--color-red);
     --color-success: var(--tn-light--04);
     --color-warn: var(--color-yellow);
-    --color-bg--layer-01: var(--tn-light--background-60);
-    --color-bg--layer-02: var(--tn-light--background-70);
+    --color-bg--layer-01: var(--tn-light--background-10);
+    --color-bg--layer-02: var(--tn-light--background-20);
     --color-headings: var(--color-cyan);
     --color-table-stripe: var(--tn-light--background-60);
     --filter-black: var(--tn-light--filter-13);

gpg-key.md

@@ -16,7 +16,7 @@ ## Obtaining My Key
 
 The key's fingerprint should match the one below:
 
-```
+``` txt
 pub   ed25519/E48D7F49A852F112 2023-07-14 [SC]
       Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9 5BAE E48D 7F49 A852 F112
 uid                 Foster Hangdaan <foster@hangdaan.email>