tweak styling

package-lock.json

@@ -10,13 +10,16 @@
       "dependencies": {
         "@fontsource/jetbrains-mono": "^4.5.12",
         "@fontsource/lato": "^4.5.10",
+        "highlight.js": "^11.7.0",
         "normalize.css": "^8.0.1",
         "prism-themes": "^1.9.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "rehype-highlight": "^6.0.0"
       },
       "devDependencies": {
         "@bspeice/vite-plugin-blog": "^1.1.0",
+        "@mapbox/rehype-highlight-code-block": "^1.0.0",
         "@mdx-js/rollup": "^2.3.0",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
@@ -31,9 +34,10 @@
     },
     "node_modules/@bspeice/vite-plugin-blog": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@bspeice/vite-plugin-blog/-/vite-plugin-blog-1.1.0.tgz",
+      "resolved": "https://git.speice.io/api/packages/bspeice/npm/%40bspeice%2Fvite-plugin-blog/-/1.1.0/vite-plugin-blog-1.1.0.tgz",
       "integrity": "sha512-Hqf14EiCNrDavvvDmaU4LkC/ZzxZ0k9Ox/8gjvw1mkoWte/MABIIPmtpAgXNsbZ85cX5OyPysjzMkvsC0Hxfxg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -403,6 +407,61 @@
       "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.10.tgz",
       "integrity": "sha512-2hYR6r661Cq9B8zugtu6yxuOKqrVhAgfOSaPSq8XoxbC4ebsl0KOTy/vPoP+9U7JuQVLfrmikirW4a9Z0nDUug=="
     },
+    "node_modules/@mapbox/rehype-highlight-code-block": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/rehype-highlight-code-block/-/rehype-highlight-code-block-1.0.0.tgz",
+      "integrity": "sha512-JdcWEJSwODwZi8mGAknjrRZsA1NBU6Y9br7d/cluVYCpGGcxt7C9xpEJ7p6SP0DL19YeUnCP/qloIK2w3PhBSA==",
+      "dev": true,
+      "dependencies": {
+        "hast-util-from-parse5": "^2.0.1",
+        "hast-util-to-string": "^1.0.0",
+        "parse5": "^3.0.2",
+        "unist-util-visit": "^1.1.3"
+      }
+    },
+    "node_modules/@mapbox/rehype-highlight-code-block/node_modules/hast-util-to-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.4.tgz",
+      "integrity": "sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mapbox/rehype-highlight-code-block/node_modules/parse5": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+      "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@mapbox/rehype-highlight-code-block/node_modules/unist-util-is": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
+      "dev": true
+    },
+    "node_modules/@mapbox/rehype-highlight-code-block/node_modules/unist-util-visit": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-visit-parents": "^2.0.0"
+      }
+    },
+    "node_modules/@mapbox/rehype-highlight-code-block/node_modules/unist-util-visit-parents": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+      "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-is": "^3.0.0"
+      }
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz",
@@ -728,7 +787,6 @@
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
       "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "*"
       }
@@ -760,6 +818,12 @@
       "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "18.15.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
+      "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -806,8 +870,7 @@
     "node_modules/@types/unist": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
-      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
-      "dev": true
     },
     "node_modules/@vitejs/plugin-react-swc": {
       "version": "3.3.0",
@@ -952,7 +1015,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
       "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -980,6 +1042,15 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
+    "node_modules/camelcase": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+      "integrity": "sha512-4nhGqUkc4BqbBBB4Q6zLuD7lzzrHYrjKGeYaEji/3tFR5VdJu9v+LilhGIVe8wxEJPPOeWo7eg8dwY13TZ1BNg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -1466,8 +1537,7 @@
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
-      "dev": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -1475,6 +1545,18 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fault": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -1502,6 +1584,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1558,6 +1648,90 @@
         "node": ">=8"
       }
     },
+    "node_modules/hast-util-from-parse5": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-2.1.0.tgz",
+      "integrity": "sha512-SVS5RVojGiwCQ61Rc/k5TZg3mqfQ+h0B9jTdrz5qfI1MVNfS1YnoUpROOk6uSUnE74m0206ksGcv7wMiVFV8Pg==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^3.0.0",
+        "hastscript": "^3.0.0",
+        "property-information": "^3.1.0",
+        "vfile-location": "^2.0.0"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/hastscript": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-3.1.0.tgz",
+      "integrity": "sha512-8V34dMSDT1Ik+ZSgTzCLdyp89MrWxcxctXPxhmb72GQj1Xkw1aHPM9UaHCWewvH2Q+PVkYUm4ZJVw4T0dgEGNA==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^3.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^3.0.0",
+        "space-separated-tokens": "^1.0.0"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/property-information": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-3.2.0.tgz",
+      "integrity": "sha512-BKU45RMZAA+3npkQ/VxEH7EeZImQcfV6rfKH0O4HkkDz3uqqz+689dbkjiWia00vK390MY6EARPS6TzNS4tXPg==",
+      "dev": true
+    },
+    "node_modules/hast-util-from-parse5/node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/vfile-location": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
+      "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-is-element": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
+      "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-estree": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-2.3.2.tgz",
@@ -1585,6 +1759,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-text": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
+      "integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "hast-util-is-element": "^2.0.0",
+        "unist-util-find-after": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
@@ -1595,6 +1784,14 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.7.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
+      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -1713,7 +1910,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
       "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1768,7 +1964,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
       "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -1921,6 +2116,20 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.8.1.tgz",
+      "integrity": "sha512-HCaGL61RKc1MYzEYn3rFoGkK0yslzCVDFJEanR19rc2L0mb8i58XM55jSRbzp9jcQrFzschPlwooC0vuNitk8Q==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "fault": "^2.0.0",
+        "highlight.js": "~11.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/markdown-extensions": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz",
@@ -3186,6 +3395,22 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/rehype-highlight": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-6.0.0.tgz",
+      "integrity": "sha512-q7UtlFicLhetp7K48ZgZiJgchYscMma7XjzX7t23bqEJF8m6/s+viXQEe4oHjrATTIZpX7RG8CKD7BlNZoh9gw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-to-text": "^3.0.0",
+        "lowlight": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark": {
       "version": "14.0.2",
       "resolved": "https://registry.npmjs.org/remark/-/remark-14.0.2.tgz",
@@ -3514,7 +3739,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
       "integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -3549,7 +3773,6 @@
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
       "integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "bail": "^2.0.0",
@@ -3564,6 +3787,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
+      "integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-generated": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.1.tgz",
@@ -3578,7 +3814,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
       "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0"
       },
@@ -3645,7 +3880,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",
       "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0"
       },
@@ -3658,7 +3892,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
       "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "unist-util-is": "^5.0.0",
@@ -3673,7 +3906,6 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
       "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "unist-util-is": "^5.0.0"
@@ -3724,7 +3956,6 @@
       "version": "5.3.7",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
       "integrity": "sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "is-buffer": "^2.0.0",
@@ -3754,7 +3985,6 @@
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz",
       "integrity": "sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "unist-util-stringify-position": "^3.0.0"

package.json

@@ -12,13 +12,16 @@
   "dependencies": {
     "@fontsource/jetbrains-mono": "^4.5.12",
     "@fontsource/lato": "^4.5.10",
+    "highlight.js": "^11.7.0",
     "normalize.css": "^8.0.1",
     "prism-themes": "^1.9.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "rehype-highlight": "^6.0.0"
   },
   "devDependencies": {
     "@bspeice/vite-plugin-blog": "^1.1.0",
+    "@mapbox/rehype-highlight-code-block": "^1.0.0",
     "@mdx-js/rollup": "^2.3.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",

pages/LayoutBase.tsx

@@ -2,17 +2,16 @@ import { PropsWithChildren } from "react";
 
 import "./style.css";
 
-const Sidebar: React.FC = () => (
+const Navbar: React.FC = () => (
-  <span className={"navbar"}>
+  <span className="navbar">
     <a href="/">Home</a>/<a href="/about">About</a>
   </span>
 );
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
   <div className="gridOffset">
-    <div className="gridOffsetSide">
+    <Navbar />
-      <Sidebar />
+    <hr />
-    </div>
     {children}
   </div>
 );

pages/about.mdx

@@ -1,4 +1,4 @@
-import Layout from "./Page";
+import Layout from "./LayoutPage";
 export default Layout;
 
 Developer currently living in New York City

pages/index.tsx

@@ -4,6 +4,7 @@ export default function () {
   return (
     <Layout>
       <p>Is this thing on?</p>
+      <a href="/2019/02/the-whole-world">Code</a>
     </Layout>
   );
 }

pages/style.css

@@ -2,12 +2,23 @@
 
 @import "@fontsource/lato";
 @import "@fontsource/jetbrains-mono";
-@import "prism-themes/themes/prism-material-dark";
+
+@import "highlight.js/styles/atom-one-dark.css";
+
+:root {
+  --color-primary: #000;
+  --color-secondary: #777;
+  --color-tertiary: #999;
+  --color-highlight: #f4f4f4;
+
+  --color-primary-highlight: #fff;
+  --color-secondary-highlight: #999;
+}
 
 body {
   font-family: "Lato", sans-serif;
-  font-size: 14pt;
+  font-size: 15pt;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 h1,
@@ -20,6 +31,20 @@ h6 {
   margin-bottom: 0;
 }
 
+h3 {
+  color: var(--color-secondary);
+}
+
+h4,
+h5,
+h6 {
+  color: var(--color-tertiary);
+}
+
+a {
+  color: var(--color-secondary);
+}
+
 p,
 ul {
   margin-top: 0.5em;
@@ -30,43 +55,70 @@ pre {
   padding: 1em 0;
 }
 
-code,
+code {
-code[class*="language-"] {
   font-family: "JetBrains Mono", monospace;
+  font-size: 14pt;
+  background-color: var(--color-highlight);
+}
+
+a,
+a > code {
+  text-decoration: dotted;
+  border-color: var(--color-secondary);
+  border-bottom-style: dotted;
+  border-bottom-width: 1px;
+}
+
+a,
+a > code {
+  transition: all ease 0.5s;
+}
+
+a:hover,
+a > code:hover {
+  color: var(--color-primary-highlight);
+  background-color: var(--color-secondary-highlight);
+  border-bottom: none;
 }
 
 .gridOffset {
   display: grid;
   grid-template-columns:
     [full-start] minmax(1em, 2fr)
-    [main-start] minmax(0, 45em) [main-end]
+    [main-start] minmax(0, 42em) [main-end]
-    minmax(0, 1fr)
+    minmax(0, 5fr) [full-end];
-    [side-start] minmax(0, 3fr) [side-end]
-    minmax(1em, 2fr) [full-end];
 }
 
-.gridOffset > :not(.gridOffsetSide) {
+.gridOffset > * {
   grid-column: main;
 }
 
-.gridOffset > div.remark-highlight,
+.gridOffset hr {
-.gridOffset > div.remark-highlight > pre {
+  display: inherit;
+  grid-column: main;
+  grid-template-columns: inherit;
+  border-style: solid;
+  border-color: var(--color-secondary);
+}
+
+.gridOffset > pre {
   display: inherit;
   grid-column: full;
   grid-template-columns: inherit;
 }
 
-.gridOffset > div.remark-highlight > pre > code {
+.gridOffset > pre > code {
   grid-column: main;
 }
 
-.gridOffsetSide {
+.navbar {
-  grid-column: side;
+  text-align: right;
-  margin-top: 1em;
+  margin: 0.5em;
-  margin-bottom: 1em;
 }
 
-.navbar > * {
+.navbar * {
   margin-left: 0.5em;
   margin-right: 0.5em;
+  text-decoration: none;
+  border-bottom-style: none;
 }

posts/LayoutBlog.tsx

@@ -19,7 +19,7 @@ export default function Layout({
     <div className="header">
       <h1>{title}</h1>
       <h3>{description}</h3>
-      <p>Published: {published}</p>
+      <h4>Published: {published}</h4>
       {updated && <p>Last updated: {updated}</p>}
     </div>
   );
@@ -27,7 +27,7 @@ export default function Layout({
   const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
     <Base>
       {header}
-      <hr />
+      <div style={{ paddingTop: "2em" }} />
       {children}
     </Base>
   );

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,

vite.config.ts

@@ -2,8 +2,39 @@ import { defineConfig } from "vite";
 import blog from "@bspeice/vite-plugin-blog";
 import mdx from "@mdx-js/rollup";
 import react from "@vitejs/plugin-react-swc";
+import rehypeHighlight from "rehype-highlight";
 
-import remarkPrism from "remark-prism";
+import { Root, Element } from "hast";
+import { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+
+// Add the `hljs` class to `pre` so it picks up the highlight background color
+const highlightPre: Plugin<[], Root> = () => {
+  return (tree) => {
+    visit(tree, (node, _, parent) => {
+      if (
+        !parent ||
+        (parent as Element).tagName !== "pre" ||
+        (node as Element).tagName !== "code"
+      ) {
+        return;
+      }
+
+      const parentElement = parent as Element;
+      const parentProperties = parentElement.properties;
+
+      if (!parentProperties) {
+        return;
+      }
+
+      if (!Array.isArray(parentProperties["className"])) {
+        parentProperties["className"] = ["hljs"];
+      } else {
+        parentProperties["className"].unshift("hljs");
+      }
+    });
+  };
+};
 
 export default defineConfig({
   plugins: [
@@ -12,7 +43,7 @@ export default defineConfig({
       "/about": "/pages/about.mdx",
       "/2019/02/the-whole-world": "/posts/2019/02/the-whole-world.mdx",
     }),
-    mdx({ remarkPlugins: [remarkPrism] }),
+    mdx({ rehypePlugins: [rehypeHighlight, highlightPre] }),
     react(),
   ],
 });