From 155e4d40ea69c2a8158c8c524e1ef00277f731e4 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Mon, 7 Nov 2022 11:14:16 -0800 Subject: [PATCH 01/11] don't pass node/edge labels to dagre --- d2layouts/d2dagrelayout/layout.go | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go index fb37ececf..14e77f164 100644 --- a/d2layouts/d2dagrelayout/layout.go +++ b/d2layouts/d2dagrelayout/layout.go @@ -73,7 +73,7 @@ func Layout(ctx context.Context, d2graph *d2graph.Graph) (err error) { loadScript := "" for _, obj := range d2graph.Objects { id := obj.AbsID() - loadScript += generateAddNodeLine(id, obj.Attributes.Label.Value, int(obj.Width), int(obj.Height)) + loadScript += generateAddNodeLine(id, int(obj.Width), int(obj.Height)) if obj.Parent != d2graph.Root { loadScript += generateAddParentLine(id, obj.Parent.AbsID()) } @@ -93,7 +93,7 @@ func Layout(ctx context.Context, d2graph *d2graph.Graph) (err error) { // for `b <- a`, edge.Edge is `a -> b` and we expect this routing result src, dst = dst, src } - loadScript += generateAddEdgeLine(src.AbsID(), dst.AbsID(), edge.AbsID(), edge.Attributes.Label.Value) + loadScript += generateAddEdgeLine(src.AbsID(), dst.AbsID(), edge.AbsID()) } if debugJS { @@ -234,15 +234,15 @@ func setGraphAttrs(attrs dagreGraphAttrs) string { ) } -func generateAddNodeLine(id, label string, width, height int) string { - return fmt.Sprintf("g.setNode(`%s`, { label: `%s`, width: %d, height: %d });\n", id, label, width, height) +func generateAddNodeLine(id string, width, height int) string { + return fmt.Sprintf("g.setNode(`%s`, { width: %d, height: %d });\n", id, width, height) } func generateAddParentLine(childID, parentID string) string { return fmt.Sprintf("g.setParent(`%s`, `%s`);\n", childID, parentID) } -func generateAddEdgeLine(fromID, toID, edgeID, label string) string { +func generateAddEdgeLine(fromID, toID, edgeID string) string { // in dagre v is from, w is to, name is to uniquely identify - return fmt.Sprintf("g.setEdge({v:`%s`, w:`%s`, name:`%s`, label:`%s`});\n", fromID, toID, edgeID, label) + return fmt.Sprintf("g.setEdge({v:`%s`, w:`%s`, name:`%s` });\n", fromID, toID, edgeID) } From a554e405418941b8c7515b2ed571dccdbd4f9864 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Mon, 7 Nov 2022 11:14:48 -0800 Subject: [PATCH 02/11] add md code block tests --- .../todo/md_code_block_fenced/board.exp.json | 214 +++++ .../todo/md_code_block_fenced/sketch.exp.svg | 819 ++++++++++++++++++ .../md_code_block_indented/board.exp.json | 214 +++++ .../md_code_block_indented/sketch.exp.svg | 818 +++++++++++++++++ .../todo/md_code_inline/board.exp.json | 214 +++++ .../todo/md_code_inline/sketch.exp.svg | 815 +++++++++++++++++ e2etests/todo_test.go | 30 +- 7 files changed, 3122 insertions(+), 2 deletions(-) create mode 100644 e2etests/testdata/todo/md_code_block_fenced/board.exp.json create mode 100644 e2etests/testdata/todo/md_code_block_fenced/sketch.exp.svg create mode 100644 e2etests/testdata/todo/md_code_block_indented/board.exp.json create mode 100644 e2etests/testdata/todo/md_code_block_indented/sketch.exp.svg create mode 100644 e2etests/testdata/todo/md_code_inline/board.exp.json create mode 100644 e2etests/testdata/todo/md_code_inline/sketch.exp.svg diff --git a/e2etests/testdata/todo/md_code_block_fenced/board.exp.json b/e2etests/testdata/todo/md_code_block_fenced/board.exp.json new file mode 100644 index 000000000..7040a1f5d --- /dev/null +++ b/e2etests/testdata/todo/md_code_block_fenced/board.exp.json @@ -0,0 +1,214 @@ +{ + "name": "", + "shapes": [ + { + "id": "md", + "type": "text", + "pos": { + "x": 0, + "y": 226 + }, + "width": 157, + "height": 130, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#FFFFFF", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "```\n{\n\tfenced: \"block\",\n\tof: \"json\",\n}\n```", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 157, + "labelHeight": 130 + }, + { + "id": "a", + "type": "", + "pos": { + "x": 22, + "y": 0 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "a", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "b", + "type": "", + "pos": { + "x": 22, + "y": 456 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "b", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(a -> md)[0]", + "src": "a", + "srcArrow": "none", + "srcLabel": "", + "dst": "md", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 78.5, + "y": 126 + }, + { + "x": 78.5, + "y": 166 + }, + { + "x": 78.5, + "y": 186 + }, + { + "x": 78.5, + "y": 226 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(md -> b)[0]", + "src": "md", + "srcArrow": "none", + "srcLabel": "", + "dst": "b", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 78.5, + "y": 356 + }, + { + "x": 78.5, + "y": 396 + }, + { + "x": 78.5, + "y": 416 + }, + { + "x": 78.5, + "y": 456 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/todo/md_code_block_fenced/sketch.exp.svg b/e2etests/testdata/todo/md_code_block_fenced/sketch.exp.svg new file mode 100644 index 000000000..b8692feab --- /dev/null +++ b/e2etests/testdata/todo/md_code_block_fenced/sketch.exp.svg @@ -0,0 +1,819 @@ + +
{
+	fenced: "block",
+	of: "json",
+}
+
+
ab \ No newline at end of file diff --git a/e2etests/testdata/todo/md_code_block_indented/board.exp.json b/e2etests/testdata/todo/md_code_block_indented/board.exp.json new file mode 100644 index 000000000..d2de66634 --- /dev/null +++ b/e2etests/testdata/todo/md_code_block_indented/board.exp.json @@ -0,0 +1,214 @@ +{ + "name": "", + "shapes": [ + { + "id": "md", + "type": "text", + "pos": { + "x": 0, + "y": 226 + }, + "width": 213, + "height": 29, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#FFFFFF", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "{\n indented: \"block\",\n of: \"json\",\n}", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 213, + "labelHeight": 29 + }, + { + "id": "a", + "type": "", + "pos": { + "x": 50, + "y": 0 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "a", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "b", + "type": "", + "pos": { + "x": 50, + "y": 355 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "b", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(a -> md)[0]", + "src": "a", + "srcArrow": "none", + "srcLabel": "", + "dst": "md", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 106.5, + "y": 126 + }, + { + "x": 106.5, + "y": 166 + }, + { + "x": 106.5, + "y": 186 + }, + { + "x": 106.5, + "y": 226 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(md -> b)[0]", + "src": "md", + "srcArrow": "none", + "srcLabel": "", + "dst": "b", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 106.5, + "y": 255 + }, + { + "x": 106.5, + "y": 295 + }, + { + "x": 106.5, + "y": 315 + }, + { + "x": 106.5, + "y": 355 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/todo/md_code_block_indented/sketch.exp.svg b/e2etests/testdata/todo/md_code_block_indented/sketch.exp.svg new file mode 100644 index 000000000..f0f7b544a --- /dev/null +++ b/e2etests/testdata/todo/md_code_block_indented/sketch.exp.svg @@ -0,0 +1,818 @@ + +

{ +indented: "block", +of: "json", +}

+
ab \ No newline at end of file diff --git a/e2etests/testdata/todo/md_code_inline/board.exp.json b/e2etests/testdata/todo/md_code_inline/board.exp.json new file mode 100644 index 000000000..f4d6322b1 --- /dev/null +++ b/e2etests/testdata/todo/md_code_inline/board.exp.json @@ -0,0 +1,214 @@ +{ + "name": "", + "shapes": [ + { + "id": "md", + "type": "text", + "pos": { + "x": 38, + "y": 226 + }, + "width": 38, + "height": 29, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#FFFFFF", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "`code`", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 38, + "labelHeight": 29 + }, + { + "id": "a", + "type": "", + "pos": { + "x": 0, + "y": 0 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "a", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "b", + "type": "", + "pos": { + "x": 0, + "y": 355 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "b", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(a -> md)[0]", + "src": "a", + "srcArrow": "none", + "srcLabel": "", + "dst": "md", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 56.5, + "y": 126 + }, + { + "x": 56.5, + "y": 166 + }, + { + "x": 56.5, + "y": 186 + }, + { + "x": 56.5, + "y": 226 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(md -> b)[0]", + "src": "md", + "srcArrow": "none", + "srcLabel": "", + "dst": "b", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 56.5, + "y": 255 + }, + { + "x": 56.5, + "y": 295 + }, + { + "x": 56.5, + "y": 315 + }, + { + "x": 56.5, + "y": 355 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/todo/md_code_inline/sketch.exp.svg b/e2etests/testdata/todo/md_code_inline/sketch.exp.svg new file mode 100644 index 000000000..41f2b9906 --- /dev/null +++ b/e2etests/testdata/todo/md_code_inline/sketch.exp.svg @@ -0,0 +1,815 @@ + +

code

+
ab \ No newline at end of file diff --git a/e2etests/todo_test.go b/e2etests/todo_test.go index 8a6adebab..6e522a236 100644 --- a/e2etests/todo_test.go +++ b/e2etests/todo_test.go @@ -10,12 +10,38 @@ func testTodo(t *testing.T) { // https://github.com/terrastruct/d2/issues/24 // string monstrosity from not being able to escape backticks within string literals { - skip: true, - name: "backtick", + skip: false, + name: "md_code_inline", script: `md: |md ` + "`" + "code`" + ` | a -> md -> b +`, + }, + { + skip: false, + name: "md_code_block_fenced", + script: `md: |md +` + "```" + ` +{ + fenced: "block", + of: "json", +} +` + "```" + ` +| +a -> md -> b +`, + }, + { + skip: false, + name: "md_code_block_indented", + script: `md: |md + { + indented: "block", + of: "json", + } +| +a -> md -> b `, }, } From d271f37f33263e371f5c1779acb3675ca679f96f Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Mon, 7 Nov 2022 11:52:01 -0800 Subject: [PATCH 03/11] use mono font with code --- d2renderers/d2svg/d2svg.go | 18 +++++++++++++++--- d2renderers/d2svg/github-markdown.css | 20 ++++++++------------ 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index 5c4e14d4a..37cfd7529 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -715,8 +715,18 @@ func embedFonts(buf *bytes.Buffer) { break } } - if strings.Contains(content, `class="text-mono"`) { - fmt.Fprintf(buf, ` + + triggers = []string{ + `class="text-mono"`, + `
`,
+		``,
+		``,
+		``,
+	}
+
+	for _, t := range triggers {
+		if strings.Contains(content, t) {
+			fmt.Fprintf(buf, `
 .text-mono {
 	font-family: "font-mono";
 }
@@ -724,7 +734,9 @@ func embedFonts(buf *bytes.Buffer) {
 	font-family: font-mono;
 	src: url("%s");
 }`,
-			d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_REGULAR)])
+				d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_REGULAR)])
+			break
+		}
 	}
 
 	buf.WriteString(`]]>`)
diff --git a/d2renderers/d2svg/github-markdown.css b/d2renderers/d2svg/github-markdown.css
index 44ff18757..1511228ab 100644
--- a/d2renderers/d2svg/github-markdown.css
+++ b/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;
 }

From c83a55f26b08f1827dba925ff7513ae84113bef1 Mon Sep 17 00:00:00 2001
From: Gavin Nishizawa 
Date: Mon, 7 Nov 2022 15:18:16 -0800
Subject: [PATCH 04/11] markdown code measurement

---
 d2renderers/d2svg/github-markdown.css | 16 +++--
 d2renderers/textmeasure/markdown.go   | 94 ++++++++++++++++++++-------
 e2etests/todo_test.go                 |  2 +-
 3 files changed, 83 insertions(+), 29 deletions(-)

diff --git a/d2renderers/d2svg/github-markdown.css b/d2renderers/d2svg/github-markdown.css
index 1511228ab..eae0e3009 100644
--- a/d2renderers/d2svg/github-markdown.css
+++ b/d2renderers/d2svg/github-markdown.css
@@ -16,6 +16,10 @@
   font-size: 1em;
 }
 
+.md {
+  tab-size: 8;
+}
+
 /* based on https://github.com/sindresorhus/github-markdown-css */
 @media (prefers-color-scheme: dark) {
   .md {
@@ -341,15 +345,15 @@
   margin-left: 0;
 }
 
-.md tt,
+/* .md tt,
 .md code {
   font-size: 12px;
-}
+} */
 
 .md pre {
   margin-top: 0;
   margin-bottom: 0;
-  font-size: 12px;
+  /* font-size: 12px; */
   word-wrap: normal;
 }
 
@@ -635,7 +639,7 @@
 .md tt {
   padding: 0.2em 0.4em;
   margin: 0;
-  font-size: 85%;
+  /* font-size: 85%; */
   background-color: var(--color-neutral-muted);
   border-radius: 6px;
 }
@@ -675,8 +679,8 @@
 .md pre {
   padding: 16px;
   overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
+  /* font-size: 85%;
+  line-height: 1.45; */
   background-color: var(--color-canvas-subtle);
   border-radius: 6px;
 }
diff --git a/d2renderers/textmeasure/markdown.go b/d2renderers/textmeasure/markdown.go
index c25907da6..b1ddb4b90 100644
--- a/d2renderers/textmeasure/markdown.go
+++ b/d2renderers/textmeasure/markdown.go
@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"math"
 	"strings"
+	"unicode"
 	"unicode/utf8"
 
 	"github.com/PuerkitoBio/goquery"
@@ -39,6 +40,9 @@ const (
 	Padding_pre      = 16
 	MarginBottom_pre = 16
 
+	PaddingTopBottom_code_em = 0.2
+	PaddingLeftRight_code_em = 0.4
+
 	PaddingLR_blockquote_em  = 1.
 	MarginBottom_blockquote  = 16
 	BorderLeft_blockquote_em = 0.25
@@ -185,6 +189,11 @@ func hasAncestorElement(n *html.Node, elType string) bool {
 
 // measures node dimensions to match rendering with styles in github-markdown.css
 func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (width, height, marginTop, marginBottom float64) {
+	var parentElementType string
+	if n.Parent != nil && n.Parent.Type == html.ElementNode {
+		parentElementType = n.Parent.Data
+	}
+
 	switch n.Type {
 	case html.TextNode:
 		if strings.TrimSpace(n.Data) == "" {
@@ -196,32 +205,63 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 		spaceRune, _ := utf8.DecodeRuneInString(" ")
 		// measure will not include leading or trailing whitespace, so we have to add in the space width
 		spaceWidth := ruler.atlases[font].glyph(spaceRune).advance
+		tabWidth := 8 * spaceWidth
 
 		str := n.Data
-		hasCodeParent := n.Parent != nil && n.Parent.Type == html.ElementNode && (n.Parent.Data == "pre" || n.Parent.Data == "code")
-		if !hasCodeParent {
-			str = strings.ReplaceAll(n.Data, "\n", " ")
+
+		htmlWhitespace := true
+		switch parentElementType {
+		case "pre", "code":
+			htmlWhitespace = false
 		}
-		if strings.HasPrefix(str, " ") {
-			str = strings.TrimPrefix(str, " ")
-			if hasPrev(n) {
-				spaceWidths += spaceWidth
+
+		if htmlWhitespace {
+			str = strings.ReplaceAll(str, "\n", " ")
+			str = strings.ReplaceAll(str, "\t", " ")
+			if strings.HasPrefix(str, " ") {
+				str = strings.TrimPrefix(str, " ")
+				if hasPrev(n) {
+					spaceWidths += spaceWidth
+				}
 			}
-		}
-		if strings.HasSuffix(str, " ") {
-			str = strings.TrimSuffix(str, " ")
-			if hasNext(n) {
-				spaceWidths += spaceWidth
+			if strings.HasSuffix(str, " ") {
+				str = strings.TrimSuffix(str, " ")
+				if hasNext(n) {
+					spaceWidths += spaceWidth
+				}
+			}
+		} else {
+			isNotSpace := func(r rune) bool {
+				return !unicode.IsSpace(r)
+			}
+
+			startIndex := strings.IndexFunc(str, isNotSpace)
+			endIndex := strings.LastIndexFunc(str, isNotSpace)
+
+			if startIndex != -1 && endIndex != -1 {
+				for i, r := range str {
+					// skip over runes in middle
+					if i >= startIndex && i <= endIndex {
+						continue
+					}
+
+					// measure width of leading/trailing whitespace
+					switch r {
+					case ' ':
+						spaceWidths += spaceWidth
+					case '\t':
+						spaceWidths += tabWidth
+					}
+				}
+
+				str = str[startIndex : endIndex+1]
 			}
 		}
 
 		w, h := ruler.MeasurePrecise(font, str)
-		w += spaceWidths
-		// fmt.Printf("%d:%s width %v height %v fontStyle %s\n", depth, n.Data, w, h, font.Style)
-		if h > 0 && h < MarkdownLineHeightPx {
-			h = MarkdownLineHeightPx
-		}
-		return w, h, 0, 0
+		// fmt.Printf("%d:'%s' width %v (%v) height %v fontStyle %s fontSize %v family %v\n", depth, n.Data, w, w+spaceWidths, h, font.Style, font.Size, font.Family)
+
+		return w + spaceWidths, h, 0, 0
 	case html.ElementNode:
 		// fmt.Printf("%d: %v node\n", depth, n.Data)
 		switch n.Data {
@@ -237,7 +277,8 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 		case "b", "strong":
 			font.Style = d2fonts.FONT_STYLE_BOLD
 		case "pre", "code":
-			// TODO monospaced font
+			font.Family = d2fonts.SourceCodePro
+			font.Style = d2fonts.FONT_STYLE_REGULAR
 		}
 
 		if n.FirstChild != nil {
@@ -284,10 +325,10 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 
 		switch n.Data {
 		case "blockquote":
-			width += float64(font.Size) * (2*PaddingLR_blockquote_em + BorderLeft_blockquote_em)
+			width += (2*PaddingLR_blockquote_em + BorderLeft_blockquote_em) * float64(font.Size)
 			marginBottom = go2.Max(marginBottom, MarginBottom_blockquote)
 		case "p":
-			if n.Parent != nil && n.Parent.Type == html.ElementNode && n.Parent.Data == "li" {
+			if parentElementType == "li" {
 				marginTop = go2.Max(marginTop, MarginTop_li_p)
 			}
 			marginBottom = go2.Max(marginBottom, MarginBottom_p)
@@ -296,7 +337,7 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 			marginBottom = go2.Max(marginBottom, MarginBottom_h)
 			switch n.Data {
 			case "h1", "h2":
-				height += float64(HeaderToFontSize[n.Data]) * PaddingBottom_h1_h2_em
+				height += PaddingBottom_h1_h2_em * float64(font.Size)
 			}
 		case "li":
 			width += PaddingLeft_ul_ol
@@ -314,11 +355,20 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 			width += 2 * Padding_pre
 			height += 2 * Padding_pre
 			marginBottom = go2.Max(marginBottom, MarginBottom_pre)
+		case "code":
+			if parentElementType != "pre" {
+				width += 2 * PaddingLeftRight_code_em * float64(font.Size)
+				height += 2 * PaddingTopBottom_code_em * float64(font.Size)
+			}
 		case "hr":
 			height += Height_hr
 			marginTop = go2.Max(marginTop, MarginTopBottom_hr)
 			marginBottom = go2.Max(marginBottom, MarginTopBottom_hr)
 		}
+
+		if height > 0 && height < MarkdownLineHeightPx {
+			height = MarkdownLineHeightPx
+		}
 		// fmt.Printf("%d:%s width %v height %v mt %v mb %v\n", depth, n.Data, width, height, marginTop, marginBottom)
 	}
 	return width, height, marginTop, marginBottom
diff --git a/e2etests/todo_test.go b/e2etests/todo_test.go
index 6e522a236..b311aef33 100644
--- a/e2etests/todo_test.go
+++ b/e2etests/todo_test.go
@@ -13,7 +13,7 @@ func testTodo(t *testing.T) {
 			skip: false,
 			name: "md_code_inline",
 			script: `md: |md
-  ` + "`" + "code`" + `
+` + "`code`" + `
 |
 a -> md -> b
 `,

From bffb018651a1e2fc6b31cd93945f6b44ed807528 Mon Sep 17 00:00:00 2001
From: Gavin Nishizawa 
Date: Mon, 7 Nov 2022 18:07:04 -0800
Subject: [PATCH 05/11] markdown code tabsize and measurement accuracy

---
 d2graph/d2graph.go                            |  3 +-
 d2renderers/d2svg/github-markdown.css         |  2 +-
 d2renderers/textmeasure/markdown.go           | 14 ++++--
 d2renderers/textmeasure/textmeasure.go        | 18 +++++--
 d2renderers/textmeasure/textmeasure_test.go   |  6 +++
 .../todo/md_code_block_fenced/board.exp.json  | 38 +++++++-------
 .../todo/md_code_block_fenced/sketch.exp.svg  | 49 +++++++++++--------
 .../md_code_block_indented/board.exp.json     | 38 +++++++-------
 .../md_code_block_indented/sketch.exp.svg     | 42 ++++++++--------
 .../todo/md_code_inline/board.exp.json        | 20 ++++----
 .../todo/md_code_inline/sketch.exp.svg        | 49 +++++++++++--------
 e2etests/todo_test.go                         |  3 --
 12 files changed, 158 insertions(+), 124 deletions(-)

diff --git a/d2graph/d2graph.go b/d2graph/d2graph.go
index c43456677..aef91878f 100644
--- a/d2graph/d2graph.go
+++ b/d2graph/d2graph.go
@@ -828,12 +828,14 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 		}
 
 		var dims *d2target.TextDimensions
+		var innerLabelPadding = 5
 		if obj.Attributes.Shape.Value == d2target.ShapeText {
 			var err error
 			dims, err = getMarkdownDimensions(mtexts, ruler, obj.Text())
 			if err != nil {
 				return err
 			}
+			innerLabelPadding = 0
 		} else {
 			dims = getTextDimensions(mtexts, ruler, obj.Text())
 		}
@@ -855,7 +857,6 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
 			}
 		}
 
-		const innerLabelPadding = 5
 		dims.Width += innerLabelPadding
 		dims.Height += innerLabelPadding
 		obj.LabelDimensions = *dims
diff --git a/d2renderers/d2svg/github-markdown.css b/d2renderers/d2svg/github-markdown.css
index eae0e3009..c5adbeae5 100644
--- a/d2renderers/d2svg/github-markdown.css
+++ b/d2renderers/d2svg/github-markdown.css
@@ -17,7 +17,7 @@
 }
 
 .md {
-  tab-size: 8;
+  tab-size: 4;
 }
 
 /* based on https://github.com/sindresorhus/github-markdown-css */
diff --git a/d2renderers/textmeasure/markdown.go b/d2renderers/textmeasure/markdown.go
index b1ddb4b90..2f1829280 100644
--- a/d2renderers/textmeasure/markdown.go
+++ b/d2renderers/textmeasure/markdown.go
@@ -205,17 +205,17 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 		spaceRune, _ := utf8.DecodeRuneInString(" ")
 		// measure will not include leading or trailing whitespace, so we have to add in the space width
 		spaceWidth := ruler.atlases[font].glyph(spaceRune).advance
-		tabWidth := 8 * spaceWidth
+		tabWidth := TAB_SIZE * spaceWidth
 
 		str := n.Data
 
-		htmlWhitespace := true
+		isCode := false
 		switch parentElementType {
 		case "pre", "code":
-			htmlWhitespace = false
+			isCode = true
 		}
 
-		if htmlWhitespace {
+		if !isCode {
 			str = strings.ReplaceAll(str, "\n", " ")
 			str = strings.ReplaceAll(str, "\t", " ")
 			if strings.HasPrefix(str, " ") {
@@ -258,7 +258,13 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 			}
 		}
 
+		if isCode {
+			ruler.boundsWithDot = true
+		}
 		w, h := ruler.MeasurePrecise(font, str)
+		if isCode {
+			ruler.boundsWithDot = false
+		}
 		// fmt.Printf("%d:'%s' width %v (%v) height %v fontStyle %s fontSize %v family %v\n", depth, n.Data, w, w+spaceWidths, h, font.Style, font.Size, font.Family)
 
 		return w + spaceWidths, h, 0, 0
diff --git a/d2renderers/textmeasure/textmeasure.go b/d2renderers/textmeasure/textmeasure.go
index 251e51b41..4a96c0c3a 100644
--- a/d2renderers/textmeasure/textmeasure.go
+++ b/d2renderers/textmeasure/textmeasure.go
@@ -14,6 +14,8 @@ import (
 	"oss.terrastruct.com/d2/lib/geo"
 )
 
+const TAB_SIZE = 4
+
 // ASCII is a set of all ASCII runes. These runes are codepoints from 32 to 127 inclusive.
 var ASCII []rune
 
@@ -77,6 +79,9 @@ type Ruler struct {
 	buf    []byte
 	prevR  rune
 	bounds *rect
+
+	// when drawing text also union Ruler.bounds with Dot
+	boundsWithDot bool
 }
 
 // New creates a new Ruler capable of drawing runes contained in the provided atlas. Orig and Dot
@@ -118,7 +123,7 @@ func NewRuler() (*Ruler, error) {
 				atlas := NewAtlas(face, ASCII)
 				atlases[font] = atlas
 				lineHeights[font] = atlas.lineHeight
-				tabWidths[font] = atlas.glyph(' ').advance * 4
+				tabWidths[font] = atlas.glyph(' ').advance * TAB_SIZE
 			}
 		}
 	}
@@ -199,10 +204,15 @@ func (txt *Ruler) drawBuf(font d2fonts.Font) {
 
 		txt.prevR = r
 
-		if txt.bounds.w()*txt.bounds.h() == 0 {
-			txt.bounds = bounds
-		} else {
+		if txt.boundsWithDot {
+			txt.bounds = txt.bounds.union(&rect{txt.Dot, txt.Dot})
 			txt.bounds = txt.bounds.union(bounds)
+		} else {
+			if txt.bounds.w()*txt.bounds.h() == 0 {
+				txt.bounds = bounds
+			} else {
+				txt.bounds = txt.bounds.union(bounds)
+			}
 		}
 	}
 }
diff --git a/d2renderers/textmeasure/textmeasure_test.go b/d2renderers/textmeasure/textmeasure_test.go
index 8a8f53110..e7a2cb9f2 100644
--- a/d2renderers/textmeasure/textmeasure_test.go
+++ b/d2renderers/textmeasure/textmeasure_test.go
@@ -95,6 +95,12 @@ _italics are all measured correctly_
 	`
 **Note:**
 `: {37, 24},
+	`a`:             {7, 24},
+	`w`:             {12, 24},
+	`ww`:            {24, 24},
+	"`inline code`": {119, 27},
+	"`code`":        {52, 27},
+	"`a`":           {23, 27},
 }
 
 func TestTextMeasureMarkdown(t *testing.T) {
diff --git a/e2etests/testdata/todo/md_code_block_fenced/board.exp.json b/e2etests/testdata/todo/md_code_block_fenced/board.exp.json
index 7040a1f5d..e23fa485a 100644
--- a/e2etests/testdata/todo/md_code_block_fenced/board.exp.json
+++ b/e2etests/testdata/todo/md_code_block_fenced/board.exp.json
@@ -8,8 +8,8 @@
         "x": 0,
         "y": 226
       },
-      "width": 157,
-      "height": 130,
+      "width": 224,
+      "height": 125,
       "level": 1,
       "opacity": 1,
       "strokeDash": 0,
@@ -35,14 +35,14 @@
       "italic": false,
       "bold": true,
       "underline": false,
-      "labelWidth": 157,
-      "labelHeight": 130
+      "labelWidth": 224,
+      "labelHeight": 125
     },
     {
       "id": "a",
       "type": "",
       "pos": {
-        "x": 22,
+        "x": 56,
         "y": 0
       },
       "width": 113,
@@ -80,8 +80,8 @@
       "id": "b",
       "type": "",
       "pos": {
-        "x": 22,
-        "y": 456
+        "x": 56,
+        "y": 451
       },
       "width": 113,
       "height": 126,
@@ -142,19 +142,19 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 78.5,
+          "x": 112,
           "y": 126
         },
         {
-          "x": 78.5,
+          "x": 112,
           "y": 166
         },
         {
-          "x": 78.5,
+          "x": 112,
           "y": 186
         },
         {
-          "x": 78.5,
+          "x": 112,
           "y": 226
         }
       ],
@@ -189,20 +189,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 78.5,
-          "y": 356
+          "x": 112,
+          "y": 351
         },
         {
-          "x": 78.5,
-          "y": 396
+          "x": 112,
+          "y": 391
         },
         {
-          "x": 78.5,
-          "y": 416
+          "x": 112,
+          "y": 411
         },
         {
-          "x": 78.5,
-          "y": 456
+          "x": 112,
+          "y": 451
         }
       ],
       "isCurve": true,
diff --git a/e2etests/testdata/todo/md_code_block_fenced/sketch.exp.svg b/e2etests/testdata/todo/md_code_block_fenced/sketch.exp.svg
index b8692feab..fa200d5c7 100644
--- a/e2etests/testdata/todo/md_code_block_fenced/sketch.exp.svg
+++ b/e2etests/testdata/todo/md_code_block_fenced/sketch.exp.svg
@@ -2,7 +2,7 @@
 
\ No newline at end of file
diff --git a/e2etests/testdata/todo/md_code_block_indented/board.exp.json b/e2etests/testdata/todo/md_code_block_indented/board.exp.json
index d2de66634..0db1ae053 100644
--- a/e2etests/testdata/todo/md_code_block_indented/board.exp.json
+++ b/e2etests/testdata/todo/md_code_block_indented/board.exp.json
@@ -8,8 +8,8 @@
         "x": 0,
         "y": 226
       },
-      "width": 213,
-      "height": 29,
+      "width": 208,
+      "height": 24,
       "level": 1,
       "opacity": 1,
       "strokeDash": 0,
@@ -35,14 +35,14 @@
       "italic": false,
       "bold": true,
       "underline": false,
-      "labelWidth": 213,
-      "labelHeight": 29
+      "labelWidth": 208,
+      "labelHeight": 24
     },
     {
       "id": "a",
       "type": "",
       "pos": {
-        "x": 50,
+        "x": 48,
         "y": 0
       },
       "width": 113,
@@ -80,8 +80,8 @@
       "id": "b",
       "type": "",
       "pos": {
-        "x": 50,
-        "y": 355
+        "x": 48,
+        "y": 350
       },
       "width": 113,
       "height": 126,
@@ -142,19 +142,19 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 106.5,
+          "x": 104,
           "y": 126
         },
         {
-          "x": 106.5,
+          "x": 104,
           "y": 166
         },
         {
-          "x": 106.5,
+          "x": 104,
           "y": 186
         },
         {
-          "x": 106.5,
+          "x": 104,
           "y": 226
         }
       ],
@@ -189,20 +189,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 106.5,
-          "y": 255
+          "x": 104,
+          "y": 250
         },
         {
-          "x": 106.5,
-          "y": 295
+          "x": 104,
+          "y": 290
         },
         {
-          "x": 106.5,
-          "y": 315
+          "x": 104,
+          "y": 310
         },
         {
-          "x": 106.5,
-          "y": 355
+          "x": 104,
+          "y": 350
         }
       ],
       "isCurve": true,
diff --git a/e2etests/testdata/todo/md_code_block_indented/sketch.exp.svg b/e2etests/testdata/todo/md_code_block_indented/sketch.exp.svg
index f0f7b544a..7a9d0b25c 100644
--- a/e2etests/testdata/todo/md_code_block_indented/sketch.exp.svg
+++ b/e2etests/testdata/todo/md_code_block_indented/sketch.exp.svg
@@ -2,7 +2,7 @@
 
\ No newline at end of file
diff --git a/e2etests/todo_test.go b/e2etests/todo_test.go
index b311aef33..61d2458e5 100644
--- a/e2etests/todo_test.go
+++ b/e2etests/todo_test.go
@@ -10,7 +10,6 @@ func testTodo(t *testing.T) {
 		// https://github.com/terrastruct/d2/issues/24
 		// string monstrosity from not being able to escape backticks within string literals
 		{
-			skip: false,
 			name: "md_code_inline",
 			script: `md: |md
 ` + "`code`" + `
@@ -19,7 +18,6 @@ a -> md -> b
 `,
 		},
 		{
-			skip: false,
 			name: "md_code_block_fenced",
 			script: `md: |md
 ` + "```" + `
@@ -33,7 +31,6 @@ a -> md -> b
 `,
 		},
 		{
-			skip: false,
 			name: "md_code_block_indented",
 			script: `md: |md
     {

From d9851246080e08997c4d19a273784462748fc9c2 Mon Sep 17 00:00:00 2001
From: Gavin Nishizawa 
Date: Mon, 7 Nov 2022 18:10:28 -0800
Subject: [PATCH 06/11] update tests

---
 .../testdata/stable/chaos2/board.exp.json     | 196 +++++++++---------
 .../testdata/stable/chaos2/sketch.exp.svg     |  94 ++++-----
 .../stable/giant_markdown_test/board.exp.json |  38 ++--
 .../stable/giant_markdown_test/sketch.exp.svg |  49 +++--
 e2etests/testdata/stable/hr/board.exp.json    |  38 ++--
 e2etests/testdata/stable/hr/sketch.exp.svg    |  42 ++--
 e2etests/testdata/stable/li1/board.exp.json   |  38 ++--
 e2etests/testdata/stable/li1/sketch.exp.svg   |  42 ++--
 e2etests/testdata/stable/li2/board.exp.json   |  38 ++--
 e2etests/testdata/stable/li2/sketch.exp.svg   |  42 ++--
 e2etests/testdata/stable/li3/board.exp.json   |  38 ++--
 e2etests/testdata/stable/li3/sketch.exp.svg   |  42 ++--
 e2etests/testdata/stable/li4/board.exp.json   |  38 ++--
 e2etests/testdata/stable/li4/sketch.exp.svg   |  49 +++--
 .../testdata/stable/lone_h1/board.exp.json    |  38 ++--
 .../testdata/stable/lone_h1/sketch.exp.svg    |  42 ++--
 .../testdata/stable/markdown/board.exp.json   |  38 ++--
 .../testdata/stable/markdown/sketch.exp.svg   |  42 ++--
 e2etests/testdata/stable/p/board.exp.json     |  38 ++--
 e2etests/testdata/stable/p/sketch.exp.svg     |  42 ++--
 e2etests/testdata/stable/pre/board.exp.json   |  38 ++--
 e2etests/testdata/stable/pre/sketch.exp.svg   |  49 +++--
 22 files changed, 566 insertions(+), 545 deletions(-)

diff --git a/e2etests/testdata/stable/chaos2/board.exp.json b/e2etests/testdata/stable/chaos2/board.exp.json
index 9ed5f3b60..be553467a 100644
--- a/e2etests/testdata/stable/chaos2/board.exp.json
+++ b/e2etests/testdata/stable/chaos2/board.exp.json
@@ -8,8 +8,8 @@
         "x": 0,
         "y": 0
       },
-      "width": 1123,
-      "height": 1659,
+      "width": 1115,
+      "height": 1654,
       "level": 1,
       "opacity": 1,
       "strokeDash": 0,
@@ -46,8 +46,8 @@
         "x": 40,
         "y": 50
       },
-      "width": 779,
-      "height": 1559,
+      "width": 776,
+      "height": 1554,
       "level": 2,
       "opacity": 1,
       "strokeDash": 0,
@@ -84,8 +84,8 @@
         "x": 80,
         "y": 878
       },
-      "width": 513,
-      "height": 681,
+      "width": 510,
+      "height": 676,
       "level": 3,
       "opacity": 1,
       "strokeDash": 0,
@@ -122,7 +122,7 @@
         "x": 120,
         "y": 928
       },
-      "width": 357,
+      "width": 355,
       "height": 226,
       "level": 4,
       "opacity": 1,
@@ -157,11 +157,11 @@
       "id": "aa.bb.cc.dd.ee",
       "type": "text",
       "pos": {
-        "x": 230,
-        "y": 1027
+        "x": 232,
+        "y": 1029
       },
-      "width": 21,
-      "height": 29,
+      "width": 16,
+      "height": 24,
       "level": 5,
       "opacity": 1,
       "strokeDash": 0,
@@ -187,14 +187,14 @@
       "italic": false,
       "bold": true,
       "underline": false,
-      "labelWidth": 21,
-      "labelHeight": 29
+      "labelWidth": 16,
+      "labelHeight": 24
     },
     {
       "id": "aa.bb.cc.dd.ff",
       "type": "",
       "pos": {
-        "x": 311,
+        "x": 308,
         "y": 978
       },
       "width": 117,
@@ -232,11 +232,11 @@
       "id": "aa.bb.cc.gg",
       "type": "text",
       "pos": {
-        "x": 408,
+        "x": 409,
         "y": 1254
       },
-      "width": 22,
-      "height": 29,
+      "width": 17,
+      "height": 24,
       "level": 4,
       "opacity": 1,
       "strokeDash": 0,
@@ -262,15 +262,15 @@
       "italic": false,
       "bold": true,
       "underline": false,
-      "labelWidth": 22,
-      "labelHeight": 29
+      "labelWidth": 17,
+      "labelHeight": 24
     },
     {
       "id": "aa.bb.cc.hh",
       "type": "",
       "pos": {
-        "x": 357,
-        "y": 1383
+        "x": 356,
+        "y": 1378
       },
       "width": 123,
       "height": 126,
@@ -383,8 +383,8 @@
       "id": "aa.bb.kk",
       "type": "oval",
       "pos": {
-        "x": 643,
-        "y": 1383
+        "x": 641,
+        "y": 1378
       },
       "width": 126,
       "height": 126,
@@ -421,7 +421,7 @@
       "id": "aa.ll",
       "type": "",
       "pos": {
-        "x": 919,
+        "x": 914,
         "y": 652
       },
       "width": 114,
@@ -459,7 +459,7 @@
       "id": "aa.mm",
       "type": "cylinder",
       "pos": {
-        "x": 906,
+        "x": 901,
         "y": 426
       },
       "width": 131,
@@ -497,11 +497,11 @@
       "id": "aa.nn",
       "type": "text",
       "pos": {
-        "x": 869,
-        "y": 1432
+        "x": 867,
+        "y": 1429
       },
-      "width": 21,
-      "height": 29,
+      "width": 16,
+      "height": 24,
       "level": 2,
       "opacity": 1,
       "strokeDash": 0,
@@ -527,15 +527,15 @@
       "italic": false,
       "bold": true,
       "underline": false,
-      "labelWidth": 21,
-      "labelHeight": 29
+      "labelWidth": 16,
+      "labelHeight": 24
     },
     {
       "id": "aa.oo",
       "type": "",
       "pos": {
-        "x": 950,
-        "y": 1383
+        "x": 943,
+        "y": 1378
       },
       "width": 123,
       "height": 126,
@@ -597,19 +597,19 @@
       "route": [
         {
           "x": 240,
-          "y": 1055.5
+          "y": 1053
         },
         {
           "x": 240,
-          "y": 1134.3
+          "y": 1133.8
         },
         {
-          "x": 273.55,
-          "y": 1216.1061538461538
+          "x": 273.8,
+          "y": 1215.8
         },
         {
-          "x": 407.75,
-          "y": 1264.5307692307692
+          "x": 409,
+          "y": 1263
         }
       ],
       "isCurve": true,
@@ -643,20 +643,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 418.75,
-          "y": 1283
+          "x": 417.5,
+          "y": 1278
         },
         {
-          "x": 418.75,
-          "y": 1323
+          "x": 417.5,
+          "y": 1318
         },
         {
-          "x": 418.75,
-          "y": 1343
+          "x": 417.5,
+          "y": 1338
         },
         {
-          "x": 418.75,
-          "y": 1383
+          "x": 417.5,
+          "y": 1378
         }
       ],
       "isCurve": true,
@@ -785,20 +785,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 918.5,
-          "y": 723.757307953773
+          "x": 913.5,
+          "y": 723.8172484599589
         },
         {
-          "x": 839.3,
-          "y": 735.757307953773
+          "x": 835.9,
+          "y": 735.8172484599589
         },
         {
-          "x": 898.7,
-          "y": 726.757307953773
+          "x": 894.1,
+          "y": 726.8172484599589
         },
         {
-          "x": 819.5,
-          "y": 738.757307953773
+          "x": 816.5,
+          "y": 738.8172484599589
         }
       ],
       "isCurve": true,
@@ -832,11 +832,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 906,
+          "x": 901,
           "y": 500
         },
         {
-          "x": 405.2,
+          "x": 404.2,
           "y": 581.6
         },
         {
@@ -891,19 +891,19 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 974,
+          "x": 969,
           "y": 552
         },
         {
-          "x": 975.2,
+          "x": 970.2,
           "y": 592
         },
         {
-          "x": 975.5,
+          "x": 970.5,
           "y": 612
         },
         {
-          "x": 975.5,
+          "x": 970.5,
           "y": 652
         }
       ],
@@ -938,20 +938,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 906,
+          "x": 901,
           "y": 500
         },
         {
-          "x": 836.2,
-          "y": 512.2920537428023
+          "x": 833.6,
+          "y": 512.3623984526112
         },
         {
-          "x": 888.55,
-          "y": 503.07301343570055
+          "x": 884.15,
+          "y": 503.0905996131528
         },
         {
-          "x": 818.75,
-          "y": 515.3650671785028
+          "x": 816.75,
+          "y": 515.452998065764
         }
       ],
       "isCurve": true,
@@ -985,67 +985,67 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 918.5,
-          "y": 729.0633187772926
+          "x": 913.5,
+          "y": 729.1405049396268
         },
         {
-          "x": 597.7,
-          "y": 808.2126637554585
+          "x": 594.7,
+          "y": 808.2281009879254
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 838
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 853
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 868
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 888
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 903
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 918
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 950.6
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 984.5
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 1018.4
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 1063.6
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 1097.5
         },
         {
-          "x": 517.5,
+          "x": 515,
           "y": 1131.4
         },
         {
-          "x": 499.9,
+          "x": 497.2,
           "y": 1215.4
         },
         {
-          "x": 429.5,
+          "x": 426,
           "y": 1261
         }
       ],
@@ -1080,11 +1080,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 906,
+          "x": 901,
           "y": 476
         },
         {
-          "x": 501.2,
+          "x": 500.2,
           "y": 396
         },
         {
@@ -1127,20 +1127,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 378.75,
+          "x": 377.5,
           "y": 878
         },
         {
-          "x": 378.75,
+          "x": 377.5,
           "y": 838
         },
         {
-          "x": 486.7,
-          "y": 807.5586929199833
+          "x": 484.7,
+          "y": 807.5723440134907
         },
         {
-          "x": 918.5,
-          "y": 725.7934645999162
+          "x": 913.5,
+          "y": 725.8617200674536
         }
       ],
       "isCurve": true,
@@ -1194,12 +1194,12 @@
           "y": 466.4
         },
         {
-          "x": 471.7,
-          "y": 622.5070674248578
+          "x": 470.7,
+          "y": 622.4899262899263
         },
         {
-          "x": 918.5,
-          "y": 704.5353371242892
+          "x": 913.5,
+          "y": 704.4496314496314
         }
       ],
       "isCurve": true,
diff --git a/e2etests/testdata/stable/chaos2/sketch.exp.svg b/e2etests/testdata/stable/chaos2/sketch.exp.svg
index 9515e0878..306355ef4 100644
--- a/e2etests/testdata/stable/chaos2/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/sketch.exp.svg
@@ -2,7 +2,7 @@
 
\ No newline at end of file
diff --git a/e2etests/testdata/stable/hr/board.exp.json b/e2etests/testdata/stable/hr/board.exp.json
index 4c71d5bdb..5258b9f6b 100644
--- a/e2etests/testdata/stable/hr/board.exp.json
+++ b/e2etests/testdata/stable/hr/board.exp.json
@@ -8,8 +8,8 @@
         "x": 0,
         "y": 226
       },
-      "width": 738,
-      "height": 119,
+      "width": 733,
+      "height": 134,
       "level": 1,
       "opacity": 1,
       "strokeDash": 0,
@@ -35,14 +35,14 @@
       "italic": false,
       "bold": true,
       "underline": false,
-      "labelWidth": 738,
-      "labelHeight": 119
+      "labelWidth": 733,
+      "labelHeight": 134
     },
     {
       "id": "a",
       "type": "",
       "pos": {
-        "x": 313,
+        "x": 310,
         "y": 0
       },
       "width": 113,
@@ -80,8 +80,8 @@
       "id": "b",
       "type": "",
       "pos": {
-        "x": 313,
-        "y": 445
+        "x": 310,
+        "y": 460
       },
       "width": 113,
       "height": 126,
@@ -142,19 +142,19 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 369,
+          "x": 366.5,
           "y": 126
         },
         {
-          "x": 369,
+          "x": 366.5,
           "y": 166
         },
         {
-          "x": 369,
+          "x": 366.5,
           "y": 186
         },
         {
-          "x": 369,
+          "x": 366.5,
           "y": 226
         }
       ],
@@ -189,20 +189,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 369,
-          "y": 345
+          "x": 366.5,
+          "y": 360
         },
         {
-          "x": 369,
-          "y": 385
+          "x": 366.5,
+          "y": 400
         },
         {
-          "x": 369,
-          "y": 405
+          "x": 366.5,
+          "y": 420
         },
         {
-          "x": 369,
-          "y": 445
+          "x": 366.5,
+          "y": 460
         }
       ],
       "isCurve": true,
diff --git a/e2etests/testdata/stable/hr/sketch.exp.svg b/e2etests/testdata/stable/hr/sketch.exp.svg
index 9a6ff8335..74bcbff6c 100644
--- a/e2etests/testdata/stable/hr/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/sketch.exp.svg
@@ -2,7 +2,7 @@
 
\ No newline at end of file
diff --git a/e2etests/testdata/stable/lone_h1/board.exp.json b/e2etests/testdata/stable/lone_h1/board.exp.json
index 77f5683d2..974555861 100644
--- a/e2etests/testdata/stable/lone_h1/board.exp.json
+++ b/e2etests/testdata/stable/lone_h1/board.exp.json
@@ -8,8 +8,8 @@
         "x": 0,
         "y": 226
       },
-      "width": 268,
-      "height": 55,
+      "width": 263,
+      "height": 50,
       "level": 1,
       "opacity": 1,
       "strokeDash": 0,
@@ -35,14 +35,14 @@
       "italic": false,
       "bold": true,
       "underline": false,
-      "labelWidth": 268,
-      "labelHeight": 55
+      "labelWidth": 263,
+      "labelHeight": 50
     },
     {
       "id": "a",
       "type": "",
       "pos": {
-        "x": 78,
+        "x": 75,
         "y": 0
       },
       "width": 113,
@@ -80,8 +80,8 @@
       "id": "b",
       "type": "",
       "pos": {
-        "x": 78,
-        "y": 381
+        "x": 75,
+        "y": 376
       },
       "width": 113,
       "height": 126,
@@ -142,19 +142,19 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 134,
+          "x": 131.5,
           "y": 126
         },
         {
-          "x": 134,
+          "x": 131.5,
           "y": 166
         },
         {
-          "x": 134,
+          "x": 131.5,
           "y": 186
         },
         {
-          "x": 134,
+          "x": 131.5,
           "y": 226
         }
       ],
@@ -189,20 +189,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 134,
-          "y": 281
+          "x": 131.5,
+          "y": 276
         },
         {
-          "x": 134,
-          "y": 321
+          "x": 131.5,
+          "y": 316
         },
         {
-          "x": 134,
-          "y": 341
+          "x": 131.5,
+          "y": 336
         },
         {
-          "x": 134,
-          "y": 381
+          "x": 131.5,
+          "y": 376
         }
       ],
       "isCurve": true,
diff --git a/e2etests/testdata/stable/lone_h1/sketch.exp.svg b/e2etests/testdata/stable/lone_h1/sketch.exp.svg
index 30a0080d7..09e5030c8 100644
--- a/e2etests/testdata/stable/lone_h1/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/sketch.exp.svg
@@ -2,7 +2,7 @@
 
\ No newline at end of file

From d507f17a187bda5cf10b9a43e46aa148559746fb Mon Sep 17 00:00:00 2001
From: Gavin Nishizawa 
Date: Mon, 7 Nov 2022 19:03:43 -0800
Subject: [PATCH 07/11] smaller pre code sizing to match css

---
 d2renderers/d2svg/github-markdown.css         |  6 +-
 d2renderers/textmeasure/markdown.go           | 20 +++--
 d2renderers/textmeasure/textmeasure_test.go   | 14 ++--
 .../testdata/stable/chaos2/board.exp.json     | 78 +++++++++----------
 .../testdata/stable/chaos2/sketch.exp.svg     | 40 +++++-----
 .../stable/giant_markdown_test/board.exp.json | 38 ++++-----
 .../stable/giant_markdown_test/sketch.exp.svg | 12 +--
 e2etests/testdata/stable/hr/board.exp.json    | 24 +++---
 e2etests/testdata/stable/hr/sketch.exp.svg    | 12 +--
 e2etests/testdata/stable/li1/sketch.exp.svg   |  6 +-
 e2etests/testdata/stable/li2/sketch.exp.svg   |  6 +-
 e2etests/testdata/stable/li3/sketch.exp.svg   |  6 +-
 e2etests/testdata/stable/li4/board.exp.json   | 24 +++---
 e2etests/testdata/stable/li4/sketch.exp.svg   | 12 +--
 .../testdata/stable/lone_h1/board.exp.json    | 24 +++---
 .../testdata/stable/lone_h1/sketch.exp.svg    | 12 +--
 .../testdata/stable/markdown/board.exp.json   | 22 +++---
 .../testdata/stable/markdown/sketch.exp.svg   | 12 +--
 e2etests/testdata/stable/p/board.exp.json     | 20 ++---
 e2etests/testdata/stable/p/sketch.exp.svg     | 12 +--
 e2etests/testdata/stable/pre/board.exp.json   | 38 ++++-----
 e2etests/testdata/stable/pre/sketch.exp.svg   | 12 +--
 .../todo/md_code_block_fenced/board.exp.json  | 38 ++++-----
 .../todo/md_code_block_fenced/sketch.exp.svg  | 12 +--
 .../md_code_block_indented/sketch.exp.svg     |  6 +-
 .../todo/md_code_inline/board.exp.json        | 20 ++---
 .../todo/md_code_inline/sketch.exp.svg        | 12 +--
 27 files changed, 274 insertions(+), 264 deletions(-)

diff --git a/d2renderers/d2svg/github-markdown.css b/d2renderers/d2svg/github-markdown.css
index c5adbeae5..49e1dfaa8 100644
--- a/d2renderers/d2svg/github-markdown.css
+++ b/d2renderers/d2svg/github-markdown.css
@@ -639,7 +639,7 @@
 .md tt {
   padding: 0.2em 0.4em;
   margin: 0;
-  /* font-size: 85%; */
+  font-size: 85%;
   background-color: var(--color-neutral-muted);
   border-radius: 6px;
 }
@@ -679,8 +679,8 @@
 .md pre {
   padding: 16px;
   overflow: auto;
-  /* font-size: 85%;
-  line-height: 1.45; */
+  font-size: 85%;
+  line-height: 1.45;
   background-color: var(--color-canvas-subtle);
   border-radius: 6px;
 }
diff --git a/d2renderers/textmeasure/markdown.go b/d2renderers/textmeasure/markdown.go
index 2f1829280..fb2145767 100644
--- a/d2renderers/textmeasure/markdown.go
+++ b/d2renderers/textmeasure/markdown.go
@@ -37,8 +37,10 @@ const (
 	Height_hr          = 4
 	MarginTopBottom_hr = 24
 
-	Padding_pre      = 16
-	MarginBottom_pre = 16
+	Padding_pre          = 16
+	MarginBottom_pre     = 16
+	LineHeight_pre       = 1.45
+	FontSize_pre_code_em = 0.85
 
 	PaddingTopBottom_code_em = 0.2
 	PaddingLeftRight_code_em = 0.4
@@ -100,9 +102,11 @@ func MeasureMarkdown(mdText string, ruler *Ruler) (width, height int, err error)
 
 	{
 		originalLineHeight := ruler.LineHeightFactor
+		ruler.boundsWithDot = true
 		ruler.LineHeightFactor = MarkdownLineHeight
 		defer func() {
 			ruler.LineHeightFactor = originalLineHeight
+			ruler.boundsWithDot = false
 		}()
 	}
 
@@ -256,14 +260,20 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 
 				str = str[startIndex : endIndex+1]
 			}
+
 		}
 
-		if isCode {
-			ruler.boundsWithDot = true
+		if parentElementType == "pre" {
+			originalLineHeight := ruler.LineHeightFactor
+			ruler.LineHeightFactor = LineHeight_pre
+			defer func() {
+				ruler.LineHeightFactor = originalLineHeight
+			}()
 		}
 		w, h := ruler.MeasurePrecise(font, str)
 		if isCode {
-			ruler.boundsWithDot = false
+			w *= FontSize_pre_code_em
+			h *= FontSize_pre_code_em
 		}
 		// fmt.Printf("%d:'%s' width %v (%v) height %v fontStyle %s fontSize %v family %v\n", depth, n.Data, w, w+spaceWidths, h, font.Style, font.Size, font.Family)
 
diff --git a/d2renderers/textmeasure/textmeasure_test.go b/d2renderers/textmeasure/textmeasure_test.go
index e7a2cb9f2..616c20c5c 100644
--- a/d2renderers/textmeasure/textmeasure_test.go
+++ b/d2renderers/textmeasure/textmeasure_test.go
@@ -88,19 +88,19 @@ _italics are all measured correctly_
 `: {214, 24},
 	`
 **bold is measured correctly**
-`: {187, 24},
+`: {188, 24},
 	`
 **Note:** This document
-`: {141, 24},
+`: {143, 24},
 	`
 **Note:**
-`: {37, 24},
-	`a`:             {7, 24},
+`: {39, 24},
+	`a`:             {9, 24},
 	`w`:             {12, 24},
 	`ww`:            {24, 24},
-	"`inline code`": {119, 27},
-	"`code`":        {52, 27},
-	"`a`":           {23, 27},
+	"`inline code`": {103, 24},
+	"`code`":        {46, 24},
+	"`a`":           {21, 24},
 }
 
 func TestTextMeasureMarkdown(t *testing.T) {
diff --git a/e2etests/testdata/stable/chaos2/board.exp.json b/e2etests/testdata/stable/chaos2/board.exp.json
index be553467a..8caeb8bd9 100644
--- a/e2etests/testdata/stable/chaos2/board.exp.json
+++ b/e2etests/testdata/stable/chaos2/board.exp.json
@@ -8,7 +8,7 @@
         "x": 0,
         "y": 0
       },
-      "width": 1115,
+      "width": 1117,
       "height": 1654,
       "level": 1,
       "opacity": 1,
@@ -421,7 +421,7 @@
       "id": "aa.ll",
       "type": "",
       "pos": {
-        "x": 914,
+        "x": 915,
         "y": 652
       },
       "width": 114,
@@ -459,7 +459,7 @@
       "id": "aa.mm",
       "type": "cylinder",
       "pos": {
-        "x": 901,
+        "x": 902,
         "y": 426
       },
       "width": 131,
@@ -500,7 +500,7 @@
         "x": 867,
         "y": 1429
       },
-      "width": 16,
+      "width": 18,
       "height": 24,
       "level": 2,
       "opacity": 1,
@@ -527,14 +527,14 @@
       "italic": false,
       "bold": true,
       "underline": false,
-      "labelWidth": 16,
+      "labelWidth": 18,
       "labelHeight": 24
     },
     {
       "id": "aa.oo",
       "type": "",
       "pos": {
-        "x": 943,
+        "x": 945,
         "y": 1378
       },
       "width": 123,
@@ -785,20 +785,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 913.5,
-          "y": 723.8172484599589
+          "x": 914.5,
+          "y": 723.8051948051948
         },
         {
-          "x": 835.9,
-          "y": 735.8172484599589
+          "x": 836.1,
+          "y": 735.8051948051948
         },
         {
-          "x": 894.1,
-          "y": 726.8172484599589
+          "x": 894.9,
+          "y": 726.8051948051948
         },
         {
           "x": 816.5,
-          "y": 738.8172484599589
+          "y": 738.8051948051948
         }
       ],
       "isCurve": true,
@@ -832,11 +832,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 901,
+          "x": 902,
           "y": 500
         },
         {
-          "x": 404.2,
+          "x": 404.4,
           "y": 581.6
         },
         {
@@ -891,19 +891,19 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 969,
+          "x": 970,
           "y": 552
         },
         {
-          "x": 970.2,
+          "x": 971.2,
           "y": 592
         },
         {
-          "x": 970.5,
+          "x": 971.5,
           "y": 612
         },
         {
-          "x": 970.5,
+          "x": 971.5,
           "y": 652
         }
       ],
@@ -938,20 +938,20 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 901,
+          "x": 902,
           "y": 500
         },
         {
-          "x": 833.6,
-          "y": 512.3623984526112
+          "x": 833.8,
+          "y": 512.3482425646968
         },
         {
-          "x": 884.15,
-          "y": 503.0905996131528
+          "x": 884.95,
+          "y": 503.08706064117416
         },
         {
           "x": 816.75,
-          "y": 515.452998065764
+          "y": 515.4353032058709
         }
       ],
       "isCurve": true,
@@ -985,12 +985,12 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 913.5,
-          "y": 729.1405049396268
+          "x": 914.5,
+          "y": 729.1095290251917
         },
         {
-          "x": 594.7,
-          "y": 808.2281009879254
+          "x": 594.9,
+          "y": 808.2219058050383
         },
         {
           "x": 515,
@@ -1080,11 +1080,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 901,
+          "x": 902,
           "y": 476
         },
         {
-          "x": 500.2,
+          "x": 500.4,
           "y": 396
         },
         {
@@ -1135,12 +1135,12 @@
           "y": 838
         },
         {
-          "x": 484.7,
-          "y": 807.5723440134907
+          "x": 484.9,
+          "y": 807.5686868686869
         },
         {
-          "x": 913.5,
-          "y": 725.8617200674536
+          "x": 914.5,
+          "y": 725.8434343434343
         }
       ],
       "isCurve": true,
@@ -1194,12 +1194,12 @@
           "y": 466.4
         },
         {
-          "x": 470.7,
-          "y": 622.4899262899263
+          "x": 470.9,
+          "y": 622.493376941946
         },
         {
-          "x": 913.5,
-          "y": 704.4496314496314
+          "x": 914.5,
+          "y": 704.4668847097302
         }
       ],
       "isCurve": true,
diff --git a/e2etests/testdata/stable/chaos2/sketch.exp.svg b/e2etests/testdata/stable/chaos2/sketch.exp.svg
index 306355ef4..baabef123 100644
--- a/e2etests/testdata/stable/chaos2/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/sketch.exp.svg
@@ -2,7 +2,7 @@
 
\ No newline at end of file
diff --git a/e2etests/testdata/todo/md_code_inline/board.exp.json b/e2etests/testdata/stable/md_code_inline/board.exp.json
similarity index 100%
rename from e2etests/testdata/todo/md_code_inline/board.exp.json
rename to e2etests/testdata/stable/md_code_inline/board.exp.json
diff --git a/e2etests/testdata/todo/md_code_inline/sketch.exp.svg b/e2etests/testdata/stable/md_code_inline/sketch.exp.svg
similarity index 100%
rename from e2etests/testdata/todo/md_code_inline/sketch.exp.svg
rename to e2etests/testdata/stable/md_code_inline/sketch.exp.svg
diff --git a/e2etests/todo_test.go b/e2etests/todo_test.go
index 9ae90c4aa..3459d052a 100644
--- a/e2etests/todo_test.go
+++ b/e2etests/todo_test.go
@@ -6,45 +6,7 @@ import (
 )
 
 func testTodo(t *testing.T) {
-	tcs := []testCase{
-		// https://github.com/terrastruct/d2/issues/24
-		// string monstrosity from not being able to escape backticks within string literals
-		{
-			name: "md_code_inline",
-			script: `md: |md
-` + "`code`" + `
-|
-a -> md -> b
-`,
-		},
-		{
-			name: "md_code_block_fenced",
-			script: `md: |md
-` + "```" + `
-{
-	fenced: "block",
-	of: "json",
-}
-` + "```" + `
-|
-a -> md -> b
-`,
-		},
-		{
-			name: "md_code_block_indented",
-			script: `md: |md
-a line of text and an
-
-	{
-		indented: "block",
-		of: "json",
-	}
-
-|
-a -> md -> b
-`,
-		},
-	}
+	tcs := []testCase{}
 
 	runa(t, tcs)
 }

From 8d5314d66e84c3df78a481568be6df6a7c29a8db Mon Sep 17 00:00:00 2001
From: Gavin Nishizawa 
Date: Tue, 8 Nov 2022 11:01:37 -0800
Subject: [PATCH 10/11] cleanup and comment

---
 d2renderers/textmeasure/markdown.go | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/d2renderers/textmeasure/markdown.go b/d2renderers/textmeasure/markdown.go
index fbb005190..69474d92f 100644
--- a/d2renderers/textmeasure/markdown.go
+++ b/d2renderers/textmeasure/markdown.go
@@ -17,6 +17,7 @@ import (
 
 var markdownRenderer goldmark.Markdown
 
+// these are css values from github-markdown.css so we can accurately compute the rendered dimensions
 const (
 	MarkdownFontSize     = d2fonts.FONT_SIZE_M
 	MarkdownLineHeight   = 1.5
@@ -210,12 +211,7 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 		spaceWidth := ruler.atlases[font].glyph(spaceRune).advance
 
 		str := n.Data
-
-		isCode := false
-		switch parentElementType {
-		case "pre", "code":
-			isCode = true
-		}
+		isCode := parentElementType == "pre" || parentElementType == "code"
 
 		if !isCode {
 			str = strings.ReplaceAll(str, "\n", " ")

From d26967c1a20fbf98dd0d3d70cd0785dc7bc82e2c Mon Sep 17 00:00:00 2001
From: Gavin Nishizawa 
Date: Tue, 8 Nov 2022 19:01:27 -0800
Subject: [PATCH 11/11] cleanup

---
 d2renderers/d2svg/github-markdown.css                    | 9 ---------
 d2renderers/textmeasure/markdown.go                      | 4 ----
 e2etests/testdata/stable/chaos2/sketch.exp.svg           | 9 ---------
 .../testdata/stable/giant_markdown_test/sketch.exp.svg   | 9 ---------
 e2etests/testdata/stable/hr/sketch.exp.svg               | 9 ---------
 e2etests/testdata/stable/li1/sketch.exp.svg              | 9 ---------
 e2etests/testdata/stable/li2/sketch.exp.svg              | 9 ---------
 e2etests/testdata/stable/li3/sketch.exp.svg              | 9 ---------
 e2etests/testdata/stable/li4/sketch.exp.svg              | 9 ---------
 e2etests/testdata/stable/lone_h1/sketch.exp.svg          | 9 ---------
 e2etests/testdata/stable/markdown/sketch.exp.svg         | 9 ---------
 .../testdata/stable/md_code_block_fenced/sketch.exp.svg  | 9 ---------
 .../stable/md_code_block_indented/sketch.exp.svg         | 9 ---------
 e2etests/testdata/stable/md_code_inline/sketch.exp.svg   | 9 ---------
 e2etests/testdata/stable/p/sketch.exp.svg                | 9 ---------
 e2etests/testdata/stable/pre/sketch.exp.svg              | 9 ---------
 16 files changed, 139 deletions(-)

diff --git a/d2renderers/d2svg/github-markdown.css b/d2renderers/d2svg/github-markdown.css
index 49e1dfaa8..587fdfd84 100644
--- a/d2renderers/d2svg/github-markdown.css
+++ b/d2renderers/d2svg/github-markdown.css
@@ -258,9 +258,6 @@
 .md kbd {
   display: inline-block;
   padding: 3px 5px;
-  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
-    monospace;
-  line-height: 10px;
   color: var(--color-fg-default);
   vertical-align: middle;
   background-color: var(--color-canvas-subtle);
@@ -345,15 +342,9 @@
   margin-left: 0;
 }
 
-/* .md tt,
-.md code {
-  font-size: 12px;
-} */
-
 .md pre {
   margin-top: 0;
   margin-bottom: 0;
-  /* font-size: 12px; */
   word-wrap: normal;
 }
 
diff --git a/d2renderers/textmeasure/markdown.go b/d2renderers/textmeasure/markdown.go
index 69474d92f..3b538759b 100644
--- a/d2renderers/textmeasure/markdown.go
+++ b/d2renderers/textmeasure/markdown.go
@@ -242,11 +242,8 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 			w *= FontSize_pre_code_em
 			h *= FontSize_pre_code_em
 		}
-		// fmt.Printf("%d:'%s' width %v (%v) height %v fontStyle %s fontSize %v family %v\n", depth, n.Data, w, w+spaceWidths, h, font.Style, font.Size, font.Family)
-
 		return w + spaceWidths, h, 0, 0
 	case html.ElementNode:
-		// fmt.Printf("%d: %v node\n", depth, n.Data)
 		switch n.Data {
 		case "h1", "h2", "h3", "h4", "h5", "h6":
 			font = HeaderFonts[n.Data]
@@ -352,7 +349,6 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 		if height > 0 && height < MarkdownLineHeightPx {
 			height = MarkdownLineHeightPx
 		}
-		// fmt.Printf("%d:%s width %v height %v mt %v mb %v\n", depth, n.Data, width, height, marginTop, marginBottom)
 	}
 	return width, height, marginTop, marginBottom
 }
diff --git a/e2etests/testdata/stable/chaos2/sketch.exp.svg b/e2etests/testdata/stable/chaos2/sketch.exp.svg
index baabef123..2eed01a57 100644
--- a/e2etests/testdata/stable/chaos2/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/sketch.exp.svg
@@ -272,9 +272,6 @@ width="1317" height="1854" viewBox="-100 -100 1317 1854">