diff --git a/web/package-lock.json b/web/package-lock.json
index 97d34739..55bb145d 100644
--- a/web/package-lock.json
+++ b/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",
diff --git a/web/package.json b/web/package.json
index 4d15f12b..ad91be29 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/lib/components/records/RecordText.svelte b/web/src/lib/components/records/RecordText.svelte
index bc1e7281..62fca42e 100644
--- a/web/src/lib/components/records/RecordText.svelte
+++ b/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>
diff --git a/web/src/routes/domains/[dn]/[[historyid]]/export/+page.svelte b/web/src/routes/domains/[dn]/[[historyid]]/export/+page.svelte
index 7d904f47..9843bfc3 100644
--- a/web/src/routes/domains/[dn]/[[historyid]]/export/+page.svelte
+++ b/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>