diff --git a/pygitweb/static/blog.js b/pygitweb/static/blog.js
index 67c16c8..854ea1d 100644
--- a/pygitweb/static/blog.js
+++ b/pygitweb/static/blog.js
@@ -51,18 +51,34 @@ function rewriteRelativeResources(root, contentBase) {
 }
 
 function addLineNumbers(root) {
-	for (const block of root.querySelectorAll("code:not(.graphviz)")) {
-		const len = block.textContent.split("\n").length;
-		if (len <= 1) {
+	for (const block of root.querySelectorAll("pre > code:not(.graphviz)")) {
+		const lines = block.textContent.split("\n");
+		if (lines.length <= 1) {
 			continue;
 		}
-		const lineref = [...Array(len).keys()].slice(1).join("\n");
-		const lineno = document.createElement("code");
-		lineno.className = "lineno";
-		lineno.textContent = lineref;
-		if (block.parentElement) {
-			block.parentElement.prepend(lineno);
+		const pre = block.parentElement;
+		if (!pre) {
+			continue;
+		}
+		const wrap = document.createElement("div");
+		wrap.className = "blog-code";
+		const langClass = block.className;
+		for (let i = 0; i < lines.length; i++) {
+			const row = document.createElement("div");
+			row.className = "blog-code-line";
+			const num = document.createElement("span");
+			num.className = "blog-code-lineno";
+			num.setAttribute("aria-hidden", "true");
+			num.textContent = String(i + 1);
+			const code = document.createElement("code");
+			if (langClass) {
+				code.className = langClass;
+			}
+			code.textContent = lines[i];
+			row.append(num, code);
+			wrap.append(row);
 		}
+		pre.replaceWith(wrap);
 	}
 }
 
@@ -100,8 +116,11 @@ async function loadmd(articleEl, contentBase, path) {
 		}
 	}, "MathJax-script");
 	runWhenReady(() => {
-		if (typeof hljs !== "undefined" && hljs.highlightAll) {
-			hljs.highlightAll();
+		if (typeof hljs === "undefined" || !hljs.highlightElement) {
+			return;
+		}
+		for (const block of articleEl.querySelectorAll(".blog-code-line > code, pre > code:not(.graphviz)")) {
+			hljs.highlightElement(block);
 		}
 	}, "Highlight-script");
 	runWhenReady(() => renderGraphs(articleEl), "GraphViz-script");
diff --git a/pygitweb/static/main.css b/pygitweb/static/main.css
index f27c787..8650f29 100644
--- a/pygitweb/static/main.css
+++ b/pygitweb/static/main.css
@@ -1368,37 +1368,9 @@ pre {
 		background-color: transparent;
 	}
 
-	pre:has(code) {
-		display: flex;
-		overflow-x: auto;
-		max-height: none !important;
-		background-color: var(--pgw-bg-muted);
-		border: 1px solid var(--pgw-border);
-		border-radius: var(--tblr-border-radius, 0.25rem);
-		padding: 0.5px;
-		width: 100%;
-	}
-
-	code {
-		font-family: "Fira Code", var(--tblr-font-monospace, ui-monospace, monospace);
-	}
-
-	code.lineno {
-		border-right: 1px solid var(--pgw-border);
-		padding: 0.5em !important;
-		flex-grow: 0 !important;
-		user-select: none;
-		color: var(--pgw-text-muted);
-	}
-
-	code.hljs {
-		padding: 0.5em !important;
-		flex-grow: 1;
-	}
-
 	p > code {
-		background-color: var(--pgw-bg-muted);
-		border: 1px solid var(--pgw-border);
+		background-color: var(--pgw-code-bg);
+		border: 1px solid var(--pgw-code-border);
 		border-radius: var(--tblr-border-radius-sm, 0.125rem);
 		padding: 0.125rem 0.375rem;
 	}
@@ -1435,6 +1407,56 @@ pre {
 	}
 }
 
+.blog-code {
+	max-width: 100%;
+	overflow: auto;
+	margin: 0 0 1rem;
+	padding: 0.5em 0;
+	background-color: var(--pgw-code-bg);
+	border: 1px solid var(--pgw-code-border);
+	border-radius: var(--tblr-border-radius, 0.25rem);
+	font-family: "Fira Code", var(--tblr-font-monospace, ui-monospace, monospace);
+	font-size: 0.875rem;
+	line-height: 1.5;
+	color: var(--pgw-text);
+}
+
+.blog-code-line {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: flex-start;
+	min-height: 1.5em;
+}
+
+.blog-code-lineno {
+	flex: 0 0 auto;
+	box-sizing: border-box;
+	min-width: 2.5em;
+	padding: 0 0.75em 0 0.5em;
+	border-right: 1px solid var(--pgw-border);
+	text-align: right;
+	color: var(--pgw-text-muted);
+	user-select: none;
+	font: inherit;
+	line-height: inherit;
+}
+
+.blog-code-line > code {
+	flex: 1 1 auto;
+	box-sizing: border-box;
+	min-width: 0;
+	padding: 0 0.75em;
+	margin: 0;
+	background: none !important;
+	border: none !important;
+	border-radius: 0 !important;
+	color: inherit;
+	font: inherit;
+	line-height: inherit;
+	white-space: pre;
+}
+
 .blog-search-container {
 	position: relative;
 }