Use different fonts for body text and code blocks

General
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.

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:

image
image783×476 34.7 KB

The JetBrains Mono will only work if the font is installed or when #831 is released which includes the font.

1 Like
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;
}
1 Like
4

How would I apply this to inline code as well? I’ve tried searching for equivalent sb-line-fenced-code for inline and tried several variations, but nothing has worked.

How do you find the available options for that type of tag?

5

If you right click the bit you want to know more about and hit Inspect, you’ll see the html behind it.

For inline code like this: inline, you’ll want to use the .sb-code class.

6

Excellent, thank you for that.

1 Like