diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index 17f4ec3db..72587383b 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -8,6 +8,8 @@
#### Improvements 🧹
+- Code snippets use bold and italic font styles as determined by highlighter [#710](https://github.com/terrastruct/d2/issues/710), [#741](https://github.com/terrastruct/d2/issues/741)
+
#### Bugfixes ⛑️
- Fixes groups overlapping in sequence diagrams when they end in a self loop. [#728](https://github.com/terrastruct/d2/pull/728)
diff --git a/d2renderers/d2svg/code.go b/d2renderers/d2svg/code.go
index 3356a290d..029b635e2 100644
--- a/d2renderers/d2svg/code.go
+++ b/d2renderers/d2svg/code.go
@@ -47,7 +47,8 @@ func styleAttr(styles map[chroma.TokenType]string, tt chroma.TokenType) string {
}
}
}
- return styles[tt]
+ out := strings.Replace(styles[tt], `font-weight="bold"`, `class="text-mono-bold"`, -1)
+ return strings.Replace(out, `font-style="italic"`, `class="text-mono-italic"`, -1)
}
// <<< END
diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index e5a3412e4..306f9b095 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -1181,6 +1181,44 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
}
}
+ triggers = []string{
+ `class="text-mono-bold"`,
+ }
+
+ for _, t := range triggers {
+ if strings.Contains(content, t) {
+ fmt.Fprintf(buf, `
+.text-mono-bold {
+ font-family: "font-mono-bold";
+}
+@font-face {
+ font-family: font-mono-bold;
+ src: url("%s");
+}`,
+ d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_BOLD)])
+ break
+ }
+ }
+
+ triggers = []string{
+ `class="text-mono-italic"`,
+ }
+
+ for _, t := range triggers {
+ if strings.Contains(content, t) {
+ fmt.Fprintf(buf, `
+.text-mono-italic {
+ font-family: "font-mono-italic";
+}
+@font-face {
+ font-family: font-mono-italic;
+ src: url("%s");
+}`,
+ d2fonts.FontEncodings[d2fonts.SourceCodePro.Font(0, d2fonts.FONT_STYLE_ITALIC)])
+ break
+ }
+ }
+
buf.WriteString(`]]>`)
}
diff --git a/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg b/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
index f98347562..a42fc16c7 100644
--- a/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
@@ -41,18 +41,18 @@ width="883" height="354" viewBox="-102 -102 883 354">
\ No newline at end of file
diff --git a/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg b/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
index 54cba0296..b01ba99e4 100644
--- a/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
@@ -41,18 +41,18 @@ width="803" height="354" viewBox="-90 -90 803 354">
\ No newline at end of file
diff --git a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg b/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
index c70aa283b..85d57d493 100644
--- a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
@@ -61,9 +61,9 @@ width="626" height="1028" viewBox="-102 -102 626 1028">
\ No newline at end of file
diff --git a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg b/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
index 288d48059..ebf7d73d0 100644
--- a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
@@ -61,9 +61,9 @@ width="626" height="1028" viewBox="-90 -90 626 1028">
\ No newline at end of file
diff --git a/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg b/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
index 4374c34c3..b471b9f5e 100644
--- a/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
@@ -39,11 +39,11 @@ width="959" height="822" viewBox="-102 -102 959 822">
\ No newline at end of file
diff --git a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg b/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
index fbbbbfed5..5e0e2cdd3 100644
--- a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
@@ -39,11 +39,11 @@ width="959" height="822" viewBox="-90 -90 959 822">
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
index 670e3a4e8..7ca346857 100644
--- a/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
@@ -43,9 +43,9 @@ width="5181" height="2986" viewBox="-78 -28 5181 2986">
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
index 670e3a4e8..7ca346857 100644
--- a/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
@@ -43,9 +43,9 @@ width="5181" height="2986" viewBox="-78 -28 5181 2986">
\ No newline at end of file
diff --git a/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
index fe2a48f45..dd7ca4cf5 100644
--- a/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
@@ -61,9 +61,9 @@ width="626" height="2752" viewBox="-102 -102 626 2752">
\ No newline at end of file
diff --git a/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
index ef3feef4c..73c73f274 100644
--- a/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
@@ -61,9 +61,9 @@ width="626" height="2752" viewBox="-90 -90 626 2752">
\ No newline at end of file
diff --git a/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
index 7e7d4c34f..d42d617e2 100644
--- a/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
@@ -61,9 +61,9 @@ width="716" height="1428" viewBox="-102 -102 716 1428">
\ No newline at end of file
diff --git a/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
index f55dcf600..71c750a11 100644
--- a/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
@@ -61,9 +61,9 @@ width="716" height="1428" viewBox="-90 -90 716 1428">
\ No newline at end of file
diff --git a/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg b/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
index 891141274..4f33f6271 100644
--- a/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
@@ -61,11 +61,11 @@ width="2482" height="2672" viewBox="-102 -102 2482 2672">
\ No newline at end of file
diff --git a/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg b/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
index 1e3419ce4..213179c44 100644
--- a/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
@@ -61,11 +61,11 @@ width="2622" height="2644" viewBox="-90 -90 2622 2644">
\ No newline at end of file