web: add DNS syntax highlighting with highlight.js

Install highlight.js and apply DNS zone file syntax highlighting on the
export page and in the RecordText component. Uses the github theme and
imports only the dns language to keep the bundle small.

web/package-lock.json

@@ -13,6 +13,7 @@
 				"@sveltestrap/sveltestrap": "^7.0.0",
 				"bootstrap": "^5.3.0",
 				"bootstrap-icons": "^1.13.0",
+				"highlight.js": "^11.11.1",
 				"html-escaper": "^3.0.0",
 				"sass": "^1.97.0",
 				"sass-loader": "^16.0.0",
@@ -3122,6 +3123,15 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/highlight.js": {
+			"version": "11.11.1",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+			"integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/html-escaper": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",

web/package.json

@@ -38,10 +38,11 @@
 	"type": "module",
 	"dependencies": {
 		"@hey-api/openapi-ts": "^0.90.6",
+		"@paralleldrive/cuid2": "^3.3.0",
 		"@sveltestrap/sveltestrap": "^7.0.0",
 		"bootstrap": "^5.3.0",
 		"bootstrap-icons": "^1.13.0",
-		"@paralleldrive/cuid2": "^3.3.0",
+		"highlight.js": "^11.11.1",
 		"html-escaper": "^3.0.0",
 		"sass": "^1.97.0",
 		"sass-loader": "^16.0.0",

web/src/lib/components/records/RecordText.svelte

@@ -22,10 +22,16 @@
 -->
 
 <script lang="ts">
+    import hljs from "highlight.js/lib/core";
+    import dns from "highlight.js/lib/languages/dns";
+    import "highlight.js/styles/github.css";
+
     import { printRR } from "$lib/dns";
     import type { dnsRR } from "$lib/dns_rr";
     import type { Domain } from "$lib/model/domain";
 
+    hljs.registerLanguage("dns", dns);
+
     interface Props {
         class?: string;
         dn: string;
@@ -37,5 +43,5 @@
 </script>
 
 <div class="text-truncate font-monospace {className}">
-    {printRR(rr, dn, origin.domain)}
+    {@html hljs.highlight(printRR(rr, dn, origin.domain), { language: "dns" }).value}
 </div>

web/src/routes/domains/[dn]/[[historyid]]/export/+page.svelte

@@ -23,11 +23,16 @@
 
 <script lang="ts">
     import { Button, Spinner } from "@sveltestrap/sveltestrap";
+    import hljs from "highlight.js/lib/core";
+    import dns from "highlight.js/lib/languages/dns";
+    import "highlight.js/styles/github.css";
 
     import { viewZone as APIViewZone } from "$lib/api/zone";
     import type { Domain } from "$lib/model/domain";
     import { t } from "$lib/translations";
 
+    hljs.registerLanguage("dns", dns);
+
     interface Props {
         data: { domain: Domain; history: string };
     }
@@ -41,6 +46,10 @@
             setTimeout(() => (copied = false), 2000);
         });
     }
+
+    function highlight(content: string): string {
+        return hljs.highlight(content, { language: "dns" }).value;
+    }
 </script>
 
 <div class="flex-fill pb-1 pt-2 d-flex flex-column" style="min-width: 0;">
@@ -69,6 +78,6 @@
                 {$t("common.copy-clipboard")}
             </Button>
         </div>
-        <pre class="flex-fill mb-0">{zoneContent}</pre>
+        <pre class="flex-fill mb-0"><code>{@html highlight(zoneContent)}</code></pre>
     {/await}
 </div>