site: add shiki highlighting

site/src/routes/docs/[...path]/+page.svelte

@@ -10,11 +10,21 @@
 
 <style>
 :global {
+
+.shiki code {
+  display: block;
+}
+.shiki .line {
+  width: 100%;
+  display: inline-block;
+}
+
+/* line number */
 .shiki code {
   counter-reset: step;
   counter-increment: step 0;
 }
-.line::before {
+.shiki .line::before {
   content: counter(step);
   counter-increment: step;
   width: 1rem;
@@ -23,5 +33,38 @@
   text-align: right;
   color: rgba(115,138,148,.4);
 }
+
+/* indent guides */
+.shiki .indent {
+  display: inline-block;
+  position: relative;
+  left: var(--indent-offset);
+}
+
+.shiki .indent:empty {
+  height: 1lh;
+  vertical-align: bottom;
+}
+
+.shiki .indent::before {
+  content: '';
+  position: absolute;
+  opacity: 0.15;
+  width: 1px;
+  height: 100%;
+  background-color: currentColor;
+}
+
+
+/* diff */
+.shiki .line.diff.remove {
+  background-color: #db0a0a41;
+}
+.shiki .line.diff.add {
+  background-color: #0adb4954;
+}
+.shiki .line.highlighted {
+  background-color: #00000024;
+}
 }
 </style>

site/src/routes/docs/[...path]/+page.ts

@@ -1,5 +1,4 @@
 import { error } from "@sveltejs/kit";
-import type { Component } from "svelte";
 
 const articles = import.meta.glob<{
   default: string;

site/src/routes/docs/getting-started/overview.md

@@ -16,4 +16,34 @@ const abc = 1 + "2";
 
 ## Step Bar
 
+```nix {1,18-21}
+inventory.instances = {
+  dyndns = {
+    roles.default.machines."jon" = { }; # [!code --]
+    roles.default.settings = { # [!code ++]
+      period   = 15;                # minutes
+      settings = {
+        "all-jon-blog" = {
+          provider         = "porkbun";
+          domain           = "jon.blog";
+
+          # (1) tell the secret-manager which key we are going to store
+          secret_field_name = "secret_api_key";
+
+          # everything below is copied verbatim into config.json
+          extraSettings = {
+            host         = "@,home,test";   # (2) comma-separated list of sub-domains [!code highlight]
+            ip_version   = "ipv4";
+            ipv6_suffix  = "";
+            api_key      = "pk1_4bb2b231275a02fdc23b7e6f3552s01S213S"; # (3) public – safe to commit
+          };
+        };
+      };
+    };
+  };
+};
+```
+
+## Step Foo
+
 ## Step Bar

site/src/routes/index.css

@@ -2,4 +2,4 @@
 
 body {
   font-family: "Geist Variable";
-}
+}