merrkry
(Merrkry)
April 5, 2024, 4:17am
1
After some research i know that font can be changed by adding:
customStyles: "[[STYLES]]"
and
#sb-root {
--editor-font: "monospace" !important;
}
I want to know if it is possible to use different fonts in body text and code blocks. Like sans-serif
for body text and monospace
for codes.
I’m not familiar with css. Any kind of suggestions will be appreciated.
daniel
April 5, 2024, 8:42am
2
You could use:
.sb-line-fenced-code {
font-family: "monospace" !important;
}
This would apply the font only to code blocks and you could still set the --editor-font
in #sb-root
for the rest of the editor (there is also --ui-font
for text outside the editor)
However I am not sure how reliable it is that the selector .sb-line-fenced-code
will continue to work in the future.
As an example:
The JetBrains Mono
will only work if the font is installed or when #831 is released which includes the font.
1 Like
garyo
(Gary Oberbrunner)
May 24, 2024, 1:52pm
3
I’m doing this as well – I like to make the fenced code blocks a bit smaller though, for consistency:
html {
--editor-width: 1200px; /* main content -- default is 800px */
--editor-font: Open Sans /* variable pitch for regular content */
}
/* monospace for fenced code blocks */
.sb-line-fenced-code {
font-family: 'iA-Mono';
font-size: 10pt;
}