lib/markdown.ts

@@ -32,8 +32,7 @@ md.core.ruler.push("anchor", (state) => {
 					attrs: [
 						["class", "header-anchor"],
 						["href", "#" + slug],
-						["aria-hidden", "true"],
-						["role", "presentation"]
+						["aria-hidden", "true"]
 					]
 				}),
 				Object.assign(new state.Token("html_block", "", 0), { content: token.markup }),
@@ -47,4 +46,4 @@ md.core.ruler.push("anchor", (state) => {
 
 export function render(text: string): string {
 	return md.render(text);
-}
+}

site/css/main.scss

@@ -4,7 +4,7 @@
 // Fonts
 $sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
 $serif: Charter, Georgia, serif;
-$monospace: SF Mono, monospace;
+$monospace: SF Mono, Courier New, monospace;
 
 // General
 body {
@@ -91,9 +91,7 @@ article {
 				font-family: $monospace;
 				color: var(--accent-color);
 				user-select: none;
-				text-decoration: none;
 
-				// hide link destination for header anchor links
 				&::before, &::after { content: ""; }
 			}
 		}
@@ -116,11 +114,17 @@ article {
 			font-family: $monospace;
 			color: var(--secondary-ui-text-color);
 		}
-		pre code::before,
-		pre code::after {
-			// we don't show the decorations for pre blocks, because it can interfere with scrolling horizontally
-			content: "";
-			display: none;
+		pre {
+			&::before, &::after {
+				content: "```";
+				display: block;
+				background: none;
+				color: var(--secondary-ui-text-color);
+			}
+			code::before, code::after {
+				content: "";
+				display: none;
+			}
 		}
 		strong::before, strong::after {
 			content: "**";
@@ -281,8 +285,8 @@ a {
 }
 
 pre {
-	overflow-x: scroll;
-
+	overflow: scroll;
+	
 	-moz-tab-size: 4;
 	-o-tab-size: 4;
 	tab-size: 4;

site/css/syntax-highlighting.css

@@ -8,10 +8,11 @@ Modified to use colors from CSS vars, defined in theme.scss
 	overflow-x: auto;
 	padding: 0.5em;
 	color: var(--atom-mono-1);
-	background: var(--atom-base);
+	
 }
 
 .hljs > code {
+	background: var(--atom-base);
 	display: block;
 }
 
@@ -82,4 +83,4 @@ Modified to use colors from CSS vars, defined in theme.scss
 
 .hljs-link {
 	text-decoration: underline;
-}
+}

site/js/comments.js

@@ -1,12 +1,4 @@
-let commentsLoaded = false;
-const details = document.getElementById("comments-container");
-details.addEventListener("toggle", (even) => {
-	if (details.open && !commentsLoaded) {
-		fetchComments().then(() => {
-			commentsLoaded = true;
-		});
-	}
-});
+fetchComments();
 
 async function fetchComments() {
 	const res = await fetch(`/comments?id=${permalink}`);