Skip to content

Commit ae2eb5f

Browse files
gabrielmferngabrielmfern
committed
fix(web): Use the proper mono font family for the code block copy-paste components (#1742)
1 parent 5171494 commit ae2eb5f

File tree

18 files changed

+329
-394
lines changed

18 files changed

+329
-394
lines changed

‎.changeset/slow-ghosts-design.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/code-block": patch
3+
---
4+
5+
Add `fontFamily` prop that is inlined into the elements for all tokens

‎apps/web/components/code-block-with-custom-theme/index.tsx

Lines changed: 139 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,151 @@
1-
import { CodeBlock } from "@react-email/components";
1+
import { CodeBlock, Font } from "@react-email/components";
22
import { Layout } from "../_components/layout";
33

44
export const component = (
5-
<CodeBlock
6-
code={`await resend.emails.send({
5+
<>
6+
<Font
7+
fallbackFontFamily="monospace"
8+
fontFamily="CommitMono"
9+
fontStyle="normal"
10+
fontWeight={400}
11+
webFont={{
12+
url: "/fonts/commit-mono/commit-mono-regular.ttf",
13+
format: "truetype",
14+
}}
15+
/>
16+
<CodeBlock
17+
code={`await resend.emails.send({
718
from: '[email protected]',
819
to: '[email protected]',
920
subject: 'hello world',
1021
react: EmailTemplate({ firstName: 'John' }),
1122
});`}
12-
language="javascript"
13-
theme={{
14-
base: {
15-
color: "#839496",
16-
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
17-
fontFamily:
18-
"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
19-
direction: "ltr",
20-
textAlign: "left",
21-
whiteSpace: "pre",
22-
wordSpacing: "normal",
23-
wordBreak: "normal",
24-
lineHeight: "1.5",
25-
MozTabSize: "4",
26-
OTabSize: "4",
27-
tabSize: "4",
28-
WebkitHyphens: "none",
29-
MozHyphens: "none",
23+
fontFamily="'CommitMono', monospace"
24+
language="javascript"
25+
theme={{
26+
base: {
27+
color: "#839496",
28+
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
29+
fontFamily:
30+
"Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
31+
direction: "ltr",
32+
textAlign: "left",
33+
whiteSpace: "pre",
34+
wordSpacing: "normal",
35+
wordBreak: "normal",
36+
lineHeight: "1.5",
37+
MozTabSize: "4",
38+
OTabSize: "4",
39+
tabSize: "4",
40+
WebkitHyphens: "none",
41+
MozHyphens: "none",
3042

31-
hyphens: "none",
32-
padding: "1em",
33-
margin: ".5em 0",
34-
overflow: "auto",
35-
borderRadius: "0.3em",
36-
background: "#002b36",
37-
},
38-
comment: {
39-
color: "#586e75",
40-
},
41-
prolog: {
42-
color: "#586e75",
43-
},
44-
doctype: {
45-
color: "#586e75",
46-
},
47-
cdata: {
48-
color: "#586e75",
49-
},
50-
punctuation: {
51-
color: "#93a1a1",
52-
},
53-
property: {
54-
color: "#268bd2",
55-
},
56-
keyword: {
57-
color: "#268bd2",
58-
},
59-
tag: {
60-
color: "#268bd2",
61-
},
62-
"class-name": {
63-
color: "#FFFFB6",
64-
textDecoration: "underline",
65-
},
66-
boolean: {
67-
color: "#b58900",
68-
},
69-
constant: {
70-
color: "#b58900",
71-
},
72-
symbol: {
73-
color: "#dc322f",
74-
},
75-
deleted: {
76-
color: "#dc322f",
77-
},
78-
number: {
79-
color: "#859900",
80-
},
81-
selector: {
82-
color: "#859900",
83-
},
84-
"attr-name": {
85-
color: "#859900",
86-
},
87-
string: {
88-
color: "#859900",
89-
},
90-
char: {
91-
color: "#859900",
92-
},
93-
builtin: {
94-
color: "#859900",
95-
},
96-
inserted: {
97-
color: "#859900",
98-
},
99-
variable: {
100-
color: "#268bd2",
101-
},
102-
operator: {
103-
color: "#EDEDED",
104-
},
105-
function: {
106-
color: "#268bd2",
107-
},
108-
regex: {
109-
color: "#E9C062",
110-
},
111-
important: {
112-
color: "#fd971f",
113-
fontWeight: "bold",
114-
},
115-
entity: {
116-
color: "#FFFFB6",
117-
cursor: "help",
118-
},
119-
url: {
120-
color: "#96CBFE",
121-
},
122-
bold: {
123-
fontWeight: "bold",
124-
},
125-
italic: {
126-
fontStyle: "italic",
127-
},
128-
atrule: {
129-
color: "#F9EE98",
130-
},
131-
"attr-value": {
132-
color: "#F9EE98",
133-
},
134-
}}
135-
/>
43+
hyphens: "none",
44+
padding: "1em",
45+
margin: ".5em 0",
46+
overflow: "auto",
47+
borderRadius: "0.3em",
48+
background: "#002b36",
49+
},
50+
comment: {
51+
color: "#586e75",
52+
},
53+
prolog: {
54+
color: "#586e75",
55+
},
56+
doctype: {
57+
color: "#586e75",
58+
},
59+
cdata: {
60+
color: "#586e75",
61+
},
62+
punctuation: {
63+
color: "#93a1a1",
64+
},
65+
property: {
66+
color: "#268bd2",
67+
},
68+
keyword: {
69+
color: "#268bd2",
70+
},
71+
tag: {
72+
color: "#268bd2",
73+
},
74+
"class-name": {
75+
color: "#FFFFB6",
76+
textDecoration: "underline",
77+
},
78+
boolean: {
79+
color: "#b58900",
80+
},
81+
constant: {
82+
color: "#b58900",
83+
},
84+
symbol: {
85+
color: "#dc322f",
86+
},
87+
deleted: {
88+
color: "#dc322f",
89+
},
90+
number: {
91+
color: "#859900",
92+
},
93+
selector: {
94+
color: "#859900",
95+
},
96+
"attr-name": {
97+
color: "#859900",
98+
},
99+
string: {
100+
color: "#859900",
101+
},
102+
char: {
103+
color: "#859900",
104+
},
105+
builtin: {
106+
color: "#859900",
107+
},
108+
inserted: {
109+
color: "#859900",
110+
},
111+
variable: {
112+
color: "#268bd2",
113+
},
114+
operator: {
115+
color: "#EDEDED",
116+
},
117+
function: {
118+
color: "#268bd2",
119+
},
120+
regex: {
121+
color: "#E9C062",
122+
},
123+
important: {
124+
color: "#fd971f",
125+
fontWeight: "bold",
126+
},
127+
entity: {
128+
color: "#FFFFB6",
129+
cursor: "help",
130+
},
131+
url: {
132+
color: "#96CBFE",
133+
},
134+
bold: {
135+
fontWeight: "bold",
136+
},
137+
italic: {
138+
fontStyle: "italic",
139+
},
140+
atrule: {
141+
color: "#F9EE98",
142+
},
143+
"attr-value": {
144+
color: "#F9EE98",
145+
},
146+
}}
147+
/>
148+
</>
136149
);
137150

138151
export default () => {

‎apps/web/components/code-block-with-line-numbers/index.tsx

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
1-
import { CodeBlock, dracula } from "@react-email/components";
1+
import { CodeBlock, Font, dracula } from "@react-email/components";
22
import { Layout } from "../_components/layout";
33

44
export const component = (
5-
<CodeBlock
6-
code={`await resend.emails.send({
5+
<>
6+
<Font
7+
fallbackFontFamily="monospace"
8+
fontFamily="CommitMono"
9+
fontStyle="normal"
10+
fontWeight={400}
11+
webFont={{
12+
url: "/fonts/commit-mono/commit-mono-regular.ttf",
13+
format: "truetype",
14+
}}
15+
/>
16+
<CodeBlock
17+
code={`await resend.emails.send({
718
from: '[email protected]',
819
to: '[email protected]',
920
subject: 'hello world',
1021
react: EmailTemplate({ firstName: 'John' }),
1122
});`}
12-
language="javascript"
13-
lineNumbers
14-
theme={dracula}
15-
/>
23+
fontFamily="'CommitMono', monospace"
24+
language="javascript"
25+
lineNumbers
26+
theme={dracula}
27+
/>
28+
</>
1629
);
1730

1831
export default () => {

‎apps/web/components/code-block-with-predefined-theme/index.tsx

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
1-
import { CodeBlock, dracula } from "@react-email/components";
1+
import { CodeBlock, Font, dracula } from "@react-email/components";
22
import { Layout } from "../_components/layout";
33

44
export const component = (
5-
<CodeBlock
6-
code={`await resend.emails.send({
5+
<>
6+
<Font
7+
fallbackFontFamily="monospace"
8+
fontFamily="CommitMono"
9+
fontStyle="normal"
10+
fontWeight={400}
11+
webFont={{
12+
url: "/fonts/commit-mono/commit-mono-regular.ttf",
13+
format: "truetype",
14+
}}
15+
/>
16+
<CodeBlock
17+
code={`await resend.emails.send({
718
from: '[email protected]',
819
to: '[email protected]',
920
subject: 'hello world',
1021
react: EmailTemplate({ firstName: 'John' }),
1122
});`}
12-
language="javascript"
13-
theme={dracula}
14-
/>
23+
fontFamily="'CommitMono', monospace"
24+
language="javascript"
25+
theme={dracula}
26+
/>
27+
</>
1528
);
1629

1730
export default () => {

‎apps/web/components/code-block-without-theme/index.tsx

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
1-
import { CodeBlock } from "@react-email/components";
1+
import { CodeBlock, Font } from "@react-email/components";
22
import { Layout } from "../_components/layout";
33

44
export const component = (
5-
<CodeBlock
6-
code={`await resend.emails.send({
5+
<>
6+
<Font
7+
fallbackFontFamily="monospace"
8+
fontFamily="CommitMono"
9+
fontStyle="normal"
10+
fontWeight={400}
11+
webFont={{
12+
url: "/fonts/commit-mono/commit-mono-regular.ttf",
13+
format: "truetype",
14+
}}
15+
/>
16+
<CodeBlock
17+
code={`await resend.emails.send({
718
from: '[email protected]',
819
to: '[email protected]',
920
subject: 'hello world',
1021
react: EmailTemplate({ firstName: 'John' }),
1122
});`}
12-
language="javascript"
13-
theme={{}}
14-
/>
23+
fontFamily="'CommitMono', monospace"
24+
language="javascript"
25+
theme={{}}
26+
/>
27+
</>
1528
);
1629

1730
export default () => {

0 commit comments

Comments
 (0)