Note editor appearance

aminokiselina · 2022-03-03T20:42:30.010Z

Hello everyone!

I am using Joplin 2.7.13 (the latest version) on a laptop running Windows 10 Home, and I have a problem with the note editor (markdown).

I haven't used Joplin in a while, but I remember the note editor being in coloured monospace font. Now it looks the same as the font in the viewer panel.

I am really sorry for asking such a noob question, but I've been trying to solve the problem myself for the past few hours (playing with the appearance settings) and I've searched online for the answer, but I didn't find the answer I was looking for.

Thank you in advance!

Daeraxa · 2022-03-04T00:45:03.311Z

Have a look at this post - should have everything you need.
The styling was changed quite a few versions back now.

aminokiselina · 2022-03-04T13:42:14.770Z

Thank you very much!

aminokiselina · 2022-03-04T13:49:59.520Z

I've changed the files according to this post, quit the app, started it again, but nothing has changed.

Daeraxa · 2022-03-04T13:59:40.796Z

If you are on Windows make sure you have fully quit the app and not just minimised it to the systray.
If you have definitely done that then can you post the contents of your userchrome.css file here (put it in a code fence by surrounding in triple backticks (```))

aminokiselina · 2022-03-04T14:03:38.420Z

Thank you for the replies!
I've made sure to properly quit the app. Here are the conents of my userchrome.css:

div.CodeMirror.cm-s-material-darker span.cm-quote {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-negative {color: #d44;}
div.CodeMirror.cm-s-material-darker span.cm-positive {color: #292;}
div.CodeMirror.cm-s-material-darker span.cm-header, span.cm-strong {font-weight: bold;}
div.CodeMirror.cm-s-material-darker span.cm-em {font-style: italic;}
div.CodeMirror.cm-s-material-darker span.cm-link {text-decoration: underline;}
div.CodeMirror.cm-s-material-darker span.cm-strikethrough {text-decoration: line-through;}

div.CodeMirror.cm-s-material-darker span.cm-keyword {color: #c792ea;}
div.CodeMirror.cm-s-material-darker span.cm-atom {color: #f78c6c;}
div.CodeMirror.cm-s-material-darker span.cm-number {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-def {color: #00f;}
div.CodeMirror.cm-s-material-darker span.cm-variable,
div.CodeMirror.cm-s-material-darker span.cm-punctuation,
div.CodeMirror.cm-s-material-darker span.cm-property,
div.CodeMirror.cm-s-material-darker span.cm-operator {}
div.CodeMirror.cm-s-material-darker span.cm-variable-2 {color: #eeffff;}
div.CodeMirror.cm-s-material-darker span.cm-variable-3, div.CodeMirror.cm-s-material-darker span.cm-type {color: #decb6b;}
div.CodeMirror.cm-s-material-darker span.cm-comment {color: #878787;}
div.CodeMirror.cm-s-material-darker span.cm-string {color: #c3e88d;}
div.CodeMirror.cm-s-material-darker span.cm-string-2 {color: #f50;}
div.CodeMirror.cm-s-material-darker span.cm-meta {color: #ffcb6b;}
div.CodeMirror.cm-s-material-darker span.cm-property {color: #decb6b;}
div.CodeMirror.cm-s-material-darker span.cm-qualifier {color: #555;}
div.CodeMirror.cm-s-material-darker span.cm-builtin {color: #30a;}
div.CodeMirror.cm-s-material-darker span.cm-bracket {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-tag {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-attribute {color: #00c;}
div.CodeMirror.cm-s-material-darker span.cm-hr {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-link {color: #c3e88d;}
div.CodeMirror.cm-s-material-darker span.cm-link-text {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-operator {color: #89ddff;}

div.CodeMirror.cm-s-material-darker span.cm-error {color: #dddddd;}
span.cm-invalidchar {color: #f00;}```

Daeraxa · 2022-03-04T15:29:40.332Z

That one works fine for me. Are you using the right theme for it? (i.e. to use that one you need to be using the dark theme, for the light theme you need to use a different set).

aminokiselina · 2022-03-04T21:38:18.610Z

Yes, I am using the dark theme. I think I give up.

dpoulton · 2022-03-04T23:17:04.086Z

The userchrome.css css above should change colours and some styling, however setting the editor to use a monospace font again is done using Appearance in the settings menu. Just enter the name of a monospace font installed on your system.

font-options

aminokiselina · 2022-03-05T08:22:16.652Z

Thank you for the reply! I've already done that and consider it a good enough compromise.

system · 2022-04-04T08:22:37.545Z

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.