use mono font with code

d2renderers/d2svg/d2svg.go

@@ -715,7 +715,17 @@ func embedFonts(buf *bytes.Buffer) {
 			break
 		}
 	}
-	if strings.Contains(content, `class="text-mono"`) {
+
+	triggers = []string{
+		`class="text-mono"`,
+		`<pre>`,
+		`<code>`,
+		`<kbd>`,
+		`<samp>`,
+	}
+
+	for _, t := range triggers {
+		if strings.Contains(content, t) {
 			fmt.Fprintf(buf, `
 .text-mono {
 	font-family: "font-mono";
@@ -725,6 +735,8 @@ func embedFonts(buf *bytes.Buffer) {
 	src: url("%s");
 }`,
 				d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_REGULAR)])
+			break
+		}
 	}
 
 	buf.WriteString(`]]></style>`)

d2renderers/d2svg/github-markdown.css

@@ -8,6 +8,14 @@
   font-family: "font-bold";
 }
 
+.md code,
+.md kbd,
+.md pre,
+.md samp {
+  font-family: "font-mono";
+  font-size: 1em;
+}
+
 /* based on https://github.com/sindresorhus/github-markdown-css */
 @media (prefers-color-scheme: dark) {
   .md {
@@ -131,14 +139,6 @@
   background-color: var(--color-canvas-default);
 }
 
-.md code,
-.md kbd,
-.md pre,
-.md samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
 .md figure {
   margin: 1em 40px;
 }
@@ -343,16 +343,12 @@
 
 .md tt,
 .md code {
-  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
-    monospace;
   font-size: 12px;
 }
 
 .md pre {
   margin-top: 0;
   margin-bottom: 0;
-  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
-    monospace;
   font-size: 12px;
   word-wrap: normal;
 }