Code blocks do not have monospace fonts

[SMUsamaShah]

Also I want to change font of code only to "Fira Code", how do I do that?

Also there is a weird gray box in upper left corner of text editor area. Its there in snippets also.

[kazup01]

Hi @SMUsamaShah , you can change the font family from Preferences.

The wired grey box is not reproduced for my environment(macOS / Boostnote v0.8.20). Could you tell me your one?

[SMUsamaShah]

@kazup01 If I change Preview Font Family to let say 'Fira Code' (a monospace font), it changes the whole preview to 'Fira Code' instead of only the code fences.

I am on Windows 10 / Boostnote v0.8.20.

I ended up modifying the theme css file like .cm-s-dracula {font-family: 'Fira Code'; } but this doesn't feel right.

[SMUsamaShah]

There should be an option to set the font of only code fences.

[pwsandoval]

I support this idea.

[ZeroX-DG]

You can change the style of the preview in the setting now. Goto setting -> interface -> scroll down at the bottom -> check Allow custom css for preview and enter your css like that bellow:

Result:

[fareedfauzi]

For those who use new version of Boosts Note (0.1.4).

Change to Fira Code !important at line 212