switch to svelte-highlight; fix devShell

flake.nix

@@ -9,7 +9,11 @@
       let pkgs = import nixpkgs { inherit system; };
       in {
         # For local development...
-        devShell = pkgs.mkShell { buildInputs = with pkgs; [ bun ]; };
+        devShell = pkgs.mkShell {
+          LD_LIBRARY_PATH = pkgs.lib.makeLibraryPath [ pkgs.stdenv.cc.cc.lib ];
+
+          buildInputs = with pkgs; [ bun ];
+        };
 
         # ... and remote deployment.
         # packages = {};

package.json

@@ -28,6 +28,6 @@
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/enhanced-img": "^0.3.8",
-		"prismjs": "^1.29.0"
+		"svelte-highlight": "^7.7.0"
 	}
 }

src/lib/Highlight.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Highlight from "svelte-highlight";
+	import "$lib/hljs.css";
+
+	export let language;
+	export let code;
+	export let slice = true;
+
+	let renderedCode;
+	$: renderedCode = code.replace(/#<hidden>[^]*?#<\/hidden>/, "");
+</script>
+
+<div class="whitespace-pre-wrap font-mono">
+	<Highlight {language} code={renderedCode} />
+</div>

src/lib/hljs.css

@@ -0,0 +1,86 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+}
+/*!
+  Theme: floral.systems
+  Description: github theme modified
+  Base: https://unpkg.com/svelte-highlight@7.7.0/styles/github.css
+*/
+.hljs {
+  color: #24292e;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-literal,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: theme(colors.coral.600);
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  color: theme(colors.teal.700);
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  color: theme(colors.coral.700);
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: theme(colors.coral.500);
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  color: #6a737d;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  color: #22863a;
+}
+.hljs-subst {
+  color: #24292e;
+}
+.hljs-section {
+  color: #005cc5;
+  font-weight: bold;
+}
+.hljs-bullet {
+  color: #735c0f;
+}
+.hljs-emphasis {
+  color: #24292e;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #24292e;
+  font-weight: bold;
+}
+.hljs-addition {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.hljs-deletion {
+  color: #b31d28;
+  background-color: #ffeef0;
+}

src/routes/+page.svelte

@@ -1,5 +1,7 @@
 <script>
-	import Prism from "prismjs";
+	import Highlight from "$lib/Highlight.svelte";
+	import nix from "svelte-highlight/languages/nix";
+
 	import demo1 from "./demo1/vm.nix?raw";
 </script>
 
@@ -33,15 +35,15 @@
 		<h2 class="border-t-2 border-teal-800 w-fit">
 			{DISTRO} — our linux distribution
 		</h2>
-		<div class="grid grid-cols-[1fr,auto,1fr] gap-2">
+		<div class="grid grid-cols-[1.15fr,auto,1fr] gap-2 items-end">
 			<div class="clear-left text-xl">
 				Gain certainty in your deployed system configuration by
 				replacing your opaque state with code.
-				<div class="whitespace-pre-wrap font-mono text-sm bg-blue-50 p-2 rounded-md drop-shadow">
-					{@html Prism.highlight(demo1.replace(/#<slice>[^]*?#<\/slice>/,""), Prism.languages["javascript"], "nix")}
+				<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow">
+					<Highlight language={nix} code={demo1} />
 				</div>
 			</div>
-			<div class="text-4xl flex justify-center items-center">
+			<div class="text-4xl flex justify-center items-center h-full">
 				⇒
 			</div>
 			<div class="float-right drop-shadow flex flex-col rounded">

src/routes/demo1/vm.nix

@@ -4,10 +4,11 @@ with import <nixpkgs> { }; nixos
     enable = true;
     httpd.virtualHost.hostName = "localhost:3000";
     httpd.virtualHost.adminAddr = "root@example.com";
-    passwordFile = pkgs.writeText "password" "correcthorsebatterystaple";
+    passwordFile =
+      pkgs.writeText "password" "correcthorsebatterystaple";
   };
 
-  networking.firewall.allowedTCPPorts = [ 80 ];#<slice>
+  networking.firewall.allowedTCPPorts = [ 80 ];#<hidden>
 
   users.users.root.openssh.authorizedKeys.keys = [
     "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH3uTwzSSMAPg84fwbNp2cq9+BdLFeA1VzDGth4zCAbz https://ckie.dev"
@@ -16,5 +17,5 @@ with import <nixpkgs> { }; nixos
     enable = true;
     settings.PermitRootLogin = "yes";
   };
-#</slice>
+#</hidden>
 }