diff --git a/assets/index.css b/assets/index.css
new file mode 100644
index 0000000..c3e27ff
--- /dev/null
+++ b/assets/index.css
@@ -0,0 +1,163 @@
+:root {
+  --covered: green;
+  --uncovered: #bf616a;
+  --background: #ffffff;
+  --topbar-background: #f6f8fa;
+  --topbar-border: #d0d7de;
+  --topbar-color: #2e3440;
+  --select-background: #d8dee9;
+  --select-border: #d0d7de;
+  --select-color: #2e3440;
+  --gutter-color: #636c76;
+}
+
+:root.dark {
+  --covered: rgb(71, 210, 71);
+  --uncovered: #bf616a;
+  --background: #242931;
+  --topbar-background: #2e3440;
+  --topbar-border: #4c566a;
+  --topbar-color: #d8dee9;
+  --select-background: #242931;
+  --select-border: #4c566a;
+  --select-color: #d8dee9;
+  --gutter-color: #636c76;
+}
+
+* {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
+  font-size: 12px;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+body {
+  background: var(--background) !important;
+  overflow-y: scroll;
+  display: none;
+}
+
+#topbar {
+  position: sticky;
+  top: 0;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  background: var(--topbar-background);
+  border-color: var(--topbar-border);
+  border-bottom: 1px solid var(--topbar-border);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#legend {
+  display: flex;
+  align-items: center;
+}
+
+#nav, #legend span {
+  margin-left: 15px;
+  color: var(--topbar-color) !important;
+}
+
+#nav {
+  position: relative;
+  display: inline-block;
+}
+
+#nav::after {
+  content: '▼';
+  position: absolute;
+  right: 1.2em;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 0.75em;
+}
+
+select {
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: var(--select-background);
+  color: var(--select-color);
+  border: 1px solid var(--select-border);
+  border-radius: 3px;
+  padding: 4px 24px 4px 8px;
+}
+
+#legend span {
+  padding: 2px 4px;
+  border-radius: 2px;
+}
+
+#content {
+  position: relative;
+  padding: 15px 0;
+  line-height: 1.67em;
+}
+
+pre {
+  position: relative;
+  background: transparent !important;
+}
+
+pre .code, pre .coverage {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+pre .coverage {
+  color: transparent !important;
+  background: transparent;
+}
+
+pre .gutter {
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  color: var(--gutter-color);
+}
+
+pre .code .gutter {
+  opacity: 0;
+}
+
+pre .gutter div {
+  padding: 0 35px;
+}
+
+pre .editor {
+  background: transparent !important;
+}
+
+.cov0  {
+  color: rgba(0, 0, 0, 0) !important;
+  background-color: color-mix(in srgb, var(--uncovered) 10%, transparent) !important;
+}
+
+.cov0 .ln {
+  color: var(--uncovered) !important;
+  background-color: color-mix(in srgb, var(--uncovered) 10%, transparent) !important;
+}
+
+.cov1, .cov2, .cov3,
+.cov4, .cov5, .cov6,
+.cov7, .cov8, .cov9, .cov10 {
+  color: rgba(0, 0, 0, 0) !important;
+  background-color: color-mix(in srgb, var(--covered) 10%, transparent) !important;
+}
+
+.cov1 .ln, .cov2 .ln, .cov3 .ln,
+.cov4 .ln, .cov5 .ln, .cov6 .ln,
+.cov7 .ln, .cov8 .ln, .cov9 .ln, .cov10 .ln {
+  color: green !important;
+  background-color: color-mix(in srgb, var(--covered) 10%, transparent) !important;
+}
diff --git a/assets/index.js b/assets/index.js
index e004065..b17cc5d 100644
--- a/assets/index.js
+++ b/assets/index.js
@@ -1,8 +1,90 @@
-let pres = document.querySelectorAll('#content pre');
-
-pres.forEach((pre) => {
-  let lines = pre.innerHTML.split('\n');
-  pre.style.setProperty('--ln-width', lines.length.toString().length);
-  let linesWithNumbers = lines.map((l, i) => `<span class="ln">${i+1}</span>${l}`);
-  pre.innerHTML = linesWithNumbers.join('\n');
-});
+document.addEventListener("DOMContentLoaded", main);
+
+function main () {
+  document.body.style.setProperty("display", "block");
+
+  document.querySelector("#legend").addEventListener("click", (event) => {
+    let lightStyle = document.querySelector('link[href*="github.min.css"]');
+    let darkStyle = document.querySelector('link[href*="github-dark.min.css"]');
+
+    document.documentElement.classList.toggle("dark");
+
+    if (document.documentElement.classList.contains("dark")) {
+      lightStyle.setAttribute("disabled", "disabled");
+      darkStyle.removeAttribute("disabled");
+    } else {
+      lightStyle.removeAttribute("disabled");
+      darkStyle.setAttribute("disabled", "disabled");
+    }
+  });
+
+  let pres = Array.from(document.querySelectorAll("#content pre"));
+  let clones = [];
+
+  pres.forEach((pre) => {
+    let gutter = document.createElement("div");
+    gutter.classList.add("gutter");
+
+    let editor = document.createElement("div");
+    editor.classList.add("editor");
+    editor.innerHTML = pre.innerHTML;
+
+    let code = document.createElement("div");
+    code.classList.add("code");
+    code.style.setProperty("top", "0");
+    code.style.setProperty("left", "0");
+    code.style.setProperty("position", "absolute");
+    code.appendChild(gutter);
+    code.appendChild(editor);
+
+    let coverage = code.cloneNode(true);
+    coverage.classList = "coverage";
+
+    pre.innerHTML = "";
+    pre.appendChild(coverage);
+    pre.appendChild(code);
+  });
+
+  highlight();
+  addLineNumbers();
+}
+
+function highlight() {
+  hljs.configure({ cssSelector: ".code .editor" });
+  hljs.highlightAll();
+}
+
+function addLineNumbers() {
+  let containers = Array.from(document.querySelectorAll("#content pre > div"));
+
+  containers.forEach((container) => {
+    let gutter = container.querySelector(".gutter");
+    let editor = container.querySelector(".editor");
+    let code = editor.innerHTML.replaceAll("    ", "  ");
+    let lines = code.split("\n");
+    let linesCount = lines.length;
+    let gutterHtml = "";
+
+    editor.innerHTML = lines
+      .map((line) => `<span class="line-start"></span>${line}`)
+      .join("\n");
+
+    let lineStarts = Array.from(editor.querySelectorAll(".line-start"));
+
+    for (let i = 0; i < linesCount; i++) {
+      let backgroundColor = window.getComputedStyle(
+        lineStarts[i].parentElement,
+      ).backgroundColor;
+      let textColor = backgroundColor.replace(" / 0.1", " / 1");
+
+      if (textColor === "rgba(0, 0, 0, 0)") {
+        gutterHtml += `<div>${i + 1}</div>`;
+      } else {
+        gutterHtml += `<div style="background-color: ${backgroundColor}; color: ${textColor};">${i + 1}</div>`;
+      }
+
+    }
+
+    gutter.innerHTML = gutterHtml;
+  });
+}
diff --git a/assets/nord.css b/assets/nord.css
deleted file mode 100644
index 6e7bcc0..0000000
--- a/assets/nord.css
+++ /dev/null
@@ -1,83 +0,0 @@
-:root {
-  --ln-width: 3;
-  --nord-deep-dark: #242931;
-  --nord0: #2e3440;
-  --nord0-pale: rgba(46, 52, 64, 0.3);
-  --nord1: #3b4252;
-  --nord1-pale: rgba(59, 66, 82, 0.3);
-  --nord2: #434c5e;
-  --nord2-pale: rgba(67, 76, 94, 0.3);
-  --nord3: #4c566a;
-  --nord3-pale: rgba(76, 86, 106, 0.3);
-  --nord4: #d8dee9;
-  --nord4-pale: rgba(216, 222, 232, 0.3);
-  --nord5: #e5e9f0;
-  --nord5-pale: rgba(229, 233, 240, 0.3);
-  --nord6: #eceff4;
-  --nord6-pale: rgba(236, 239, 244, 0.3);
-  --nord7: #8fbcbb;
-  --nord7-pale: rgba(143, 188, 187, 0.3);
-  --nord8: #88c0d0;
-  --nord9: #81a1c1;
-  --nord10: #5e81ac;
-  --nord10-pale: rgba(94, 129, 172, 0.3);
-  --nord11: #bf616a;
-  --nord11-pale: rgba(191, 97, 106, 0.3);
-  --nord12: #d08770;
-  --nord12-pale: rgba(208, 135, 112, 0.3);
-  --nord13: #ebcb8b;
-  --nord13-pale: rgba(235, 203, 139, 0.3);
-  --nord14: #a3be8c;
-  --nord14-pale: rgba(163, 190, 140, 0.3);
-  --nord15: #b48ead;
-  --nord15-pale: rgba(180, 140, 173, 0.3);
-}
-
-* {
-  font-family: Menlo, Monaco, source-code-pro, "Ubuntu Mono", "DejaVu sans mono", Consolas, monospace, Menlo, Monaco, "Courier New", monospace;
-  font-weight: normal !important;
-  font-size: 14px;
-}
-
-body {
-  background: var(--nord0) !important;
-  color: var(--nord3) !important;
-}
-
-#topbar {
-  background: var(--nord1) !important;
-  border-color: var(--nord3) !important;
-}
-
-select {
-  background-color: var(--nord-deep-dark);
-  color: var(--nord9);
-  border: 1px solid var(--nord3);
-  border-radius: 3px;
-  padding: 2px;
-}
-
-pre {
-  line-height: 1.4em;
-}
-
-.ln {
-  display: inline-block;
-  min-width: calc(0.48em * (var(--ln-width) + 1));
-  text-align: right;
-  margin-right: 15px;
-  padding-right: 10px;
-  color: var(--nord3);
-}
-
-.cov0, .cov0 .ln   { color: var(--nord11) !important; }
-.cov1, .cov1 .ln   { color: var(--nord13) !important; }
-.cov2, .cov2 .ln   { color: var(--nord14) !important; }
-.cov3, .cov3 .ln   { color: var(--nord14) !important; }
-.cov4, .cov4 .ln   { color: var(--nord14) !important; }
-.cov5, .cov5 .ln   { color: var(--nord14) !important; }
-.cov6, .cov6 .ln   { color: var(--nord14) !important; }
-.cov7, .cov7 .ln   { color: var(--nord14) !important; }
-.cov8, .cov8 .ln   { color: var(--nord14) !important; }
-.cov9, .cov9 .ln   { color: var(--nord14) !important; }
-.cov10, .cov10 .ln { color: var(--nord14) !important; }
diff --git a/scripts/push.sh b/scripts/push.sh
index 589e43a..430d015 100755
--- a/scripts/push.sh
+++ b/scripts/push.sh
@@ -30,8 +30,12 @@ cd "${cover_dir}"
 # beautify html
 
 for file in "revisions/${REVISION}.html" "revisions/${REVISION}-inc.html"; do
-  ex -sc '%s/<style>/<style>@import url("..\/nord.css");/'             -c 'x' "${file}"
-  ex -sc '%s/<\/script>/<\/script><script src="..\/index.js"><\/script>/' -c 'x' "${file}"
+  ex -sc '%s/<\/title>/<\/title><link rel="stylesheet" href="..\/index.css">/' -c 'x' "${file}"
+  ex -sc '%s/<\/title>/<\/title><link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.9.0\/styles\/github.min.css">/' -c 'x' "${file}"
+  ex -sc '%s/<\/title>/<\/title><link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.9.0\/styles\/github-dark.min.css" disabled>/' -c 'x' "${file}"
+  ex -sc '%s/<\/title>/<\/title><script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.9.0\/highlight.min.js"><\/script>/' -c 'x' "${file}"
+  ex -sc '%s/<\/title>/<\/title><script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.9.0\/languages\/go.min.js"><\/script>/' -c 'x' "${file}"
+  ex -sc '%s/<\/title>/<\/title><script src="..\/index.js"><\/script>/' -c 'x' "${file}"
 done
 
 # if we are on the main branch, copy files to main.*