Thanks for the reply! Let me try to install the font(s)
You are welcome Have to sleep now. 5am my time.
Thanks for all your pull requests for my documentation, it's a great help! I always doubts about my english expressions.
Happy to help with the pull requests
Quick question, after installing, do we set the fonts under Tools > Options > Appearance? I set the fonts as seen below but they don't seem to be changing anything even after restarting the app:
I am probably just missing a step to enable them.
Use external css:
Thanks! I was able to increase the overall size of the text. Unfortunately though this doesn't solve the problem of the text inside the code blocks being too small proportionally to the size of the text in the note.
Is there a way to just increase the size of the text inside the code block using the css? Thanks!
In the external CSS, the below line is related to the code block fonts size, but it would also including some of the markdown syntax like image links, footnote reference, table syntax, HTML, etc.
--usp-smaller-monospace-font-size: 86% !important;
That's perfect! I set it from 86% to 100% and the code block text is much more readable.
One strange thing I noticed while editing was the Horizontal Rule displays oddly in the Markdown Editor. It displays both the Horizontal Rule and the *** after it:
Without the theme applied, it generally renders as such (only the three ***):
I thought this might be a bug since I think it should only be showing the three ***?
Actually, it will break the whole reading experience of the notes, for an alternative, you can editing only for the code block font size:
add the below codes to the bottom of your userchrome.css
.CodeMirror-lines .CodeMirror-line.cm-jn-code-block .cm-jn-monospace {
font-size: 14px !important;
}
It is for emphasizing the horizontal line, and you can turn it off by disabling Enable evident horizontal line
through the ReMoods setting page.
Thanks, I updated the userchrome.css as below however it doesn't seem to be updating the font size of the text inside the code blocks. Maybe I'm missing something?
/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
:root {
/* For markdown editor */
--usp-remoods-hue: 213deg !important; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
--usp-base-font: "montserrat","chiron hei hk text extralight" !important;
--usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight" !important;
--usp-base-font-size: 14px !important;
--usp-smaller-monospace-font-size: 86% !important;
}
/* Avoid white background when starting Joplin */
body {
background-color: hsl(var(--usp-remoods-hue), 8%, 27%) !important;
}
.CodeMirror-lines .CodeMirror-line.cm-jn-code-block .cm-jn-monospace {
font-size: 30px !important;
}
Try to add the #react-root
in front of it like below
#react-root .CodeMirror-lines .CodeMirror-line.cm-jn-code-block .cm-jn-monospace {
•••
}
Unfortunately no change with:
#react-root .CodeMirror-lines .CodeMirror-line.cm-jn-code-block .cm-jn-monospace {
font-size: 30px !important;
}
Did you restart Joplin?
I did.
Woops, I think I should test it myself in later time. You can remove it first, and I reply you when I get back to my laptop.
Sounds great thanks so much!
Hey @joplin_user, I've just tested it for you. The below code will works for you:
.CodeMirror-lines .CodeMirror-line.cm-jn-code-block > * {
font-size: 30px !important;
}
Hey @Sinacs, thanks for following up. I added your stanza to userchrome.css at the bottom of the file however it doesn't seem to be changing the size of the text in the code block. Is it working for you? Maybe my stanza is incorrect?
/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
:root {
/* For markdown editor */
--usp-remoods-hue: 213deg !important; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
--usp-base-font: "montserrat","chiron hei hk text extralight" !important;
--usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight" !important;
--usp-base-font-size: 14px !important;
--usp-smaller-monospace-font-size: 86% !important;
}
/* Avoid white background when starting Joplin */
body {
background-color: hsl(var(--usp-remoods-hue), 8%, 27%) !important;
}
.CodeMirror-lines .CodeMirror-line.cm-jn-code-block > * {
font-size: 30px !important;
}