feat(website): improve how code-blocks are rendered on pages

website/next.config.mjs

@@ -1,4 +1,5 @@
 import createMDX from '@next/mdx';
+import rehypePrettyCode from 'rehype-pretty-code';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -17,6 +18,18 @@ const nextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
 };
 
-const withMDX = createMDX({})
+const withMDX = createMDX({
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: [
+      [
+        rehypePrettyCode,
+        {
+          theme: 'dracula',
+        },
+      ],
+    ],
+  },
+});
 
 export default withMDX(nextConfig);

website/package.json

@@ -26,7 +26,9 @@
     "react-dom": "^18",
     "react-icons": "^5.1.0",
     "react-toastify": "^10.0.5",
-    "recharts": "^2.12.3"
+    "recharts": "^2.12.3",
+    "rehype-pretty-code": "^0.13.1",
+    "shiki": "^1.3.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.12",

website/src/app/(pages)/quickstart/page.mdx

@@ -51,7 +51,7 @@ nix profile install --file https://github.com/vst/hostpatrol/archive/v<VERSION>.
 Instead of providing hosts one-by-one, you can use a configuration
 file. For example given a configuration file `config.yaml` like this:
 
-```yaml
+```yaml showLineNumbers
 ## List of known SSH public keys for all hosts.
 knownSshKeys:
   - gh:some-github-user

website/src/app/globals.css

@@ -3,5 +3,29 @@
 @tailwind utilities;
 
 .text-balance {
-    text-wrap: balance;
+  text-wrap: balance;
+}
+
+code {
+  counter-reset: line;
+}
+
+code > [data-line]::before {
+  counter-increment: line;
+  content: counter(line);
+
+  /* Other styling */
+  display: inline-block;
+  width: 1rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: gray;
+}
+
+code[data-line-numbers-max-digits='2'] > [data-line]::before {
+  width: 2rem;
+}
+
+code[data-line-numbers-max-digits='3'] > [data-line]::before {
+  width: 3rem;
 }