Home / GitHub Page

Monospace editor font size is no longer consistent

I can confirm that. The left side editor is now colored (after the update to 1.1.4) with no possibility to change the colors:

  • Lines beginning with a dash are blue
  • Lines beginning with a # are in a huge font size, bold an blue

image

@CalebJohn, perhaps by default the heading should be the same size as the rest of the text (since applying bold to it already makes it stand out)?

Just to add an opinion to the contrary.

I permanently moved to the CodeMirror editor whilst it was in beta due, in part, to this feature. By proportionately scaling up the headings it made it easier for me to find my place, when editing, in long notes. This might not be quite so important now that the editor is better kept in sync with the render pane, but I still find it useful.

3 Likes

This makes sense as well. Personally I've used the editor for several months too and I think the large font size looks nice although for me it doesn't make too big a difference either way. Perhaps we should put that up for a vote to gather more opinions?

Could do, but why?

In the past if you wanted the ACE editor to display differently from default you used userchrome.css to tweak it. Just wondering why that should be any different with the CodeMirror editor?

I have only had a quick look at this but it seems that just these few lines of css in userchrome.css will set CodeMirror to the plainest, non-enhanced, text-editor-only style display settings.

div.CodeMirror-lines * {
	font-size: 13px !important;
	color: black !important;
	font-weight: normal !important;
	text-decoration: none !important;
}

Actually userchrome.css will let you change pretty much everything in CodeMirror from the default.

2 Likes

Ideally we should set as default the option that most people want and assuming a poll can give that info, it could be worth it. Then indeed users are always free to change the default to whatever they want with custom CSS.

1 Like

OK. But that's most people who visit the forum, not most people who use Joplin.

That was my very point. If there are users that don't want the larger headings or different colours (like @chris1 mentions) they can do that themselves now...

1 Like

We could also create a collection of css tweaks for exact this same reason.

I've created a topic (wiki - everyone can edit the post and add sections) Joplin Customization in #lounge but we can move it to a different category. Let's see how that works out....

3 Likes

Thanks for creating this @tessus I had meant to make a post about this exact sizing change, but unfortunately have gotten busy these last few weeks. How do you feel about adding another link from dpoulton About discovering new elements that can be themed?

Just to add a different view to the OP. I just updated today and I quite like the change. When I'm typing a note I don't naturally scan my eyes to the right to check I've entered the markdown correctly, so to see a visual cue with a bit of colour etc while I'm creating a note is quite nice.

2 Likes

Is there any way to switch off "Replies" on this wiki page? Just think it might be better, if possible, to keep this to a collection of snippets without added "conversation"?.

You can add whatever you like. It's a wiki page, :wink:

Not sure what would happen, if I closed the topic. (We can test this later. I'm heading out to the dentist...)

I can add 1 reply with moderator color (yellow) that people shall update the first entry and not create replies.
But I would delete/hiide comments on that topic anyway.

Have a nice time...

Thanks, because the dentist is my favorite place to be.... :+1:

This CSS works great. Just one thing though, I liked the coloring before, just not the font size changing. How do I modify the CSS to allow the default color setting like pre-v1.1.4, where bullet lines were white, headings were yellow, etc.

Thank you!

@markrenier

Someone on the forum was looking for a way to change CodeMirror to look like the old ACE editor dark theme.

I created a css file to help them out.

You could base a css file on this, just changing the colours accordingly but making sure you keep the font-size attribute of the span.cm-header element.

1 Like

I like the new sizing and color features, easy to navigate the markdown. BUT on a 4k monitor the normal text font gets a bit small. The font size control in the Appearance settings have no affect. Possible this could be the baseline for text. The only other option for me is to use the ZOOM option but that makes the entire app cartoon sized fonts (big) to get text size up. I'm sure I could hack up the CSS but seems like this should be a easy to change user option.

@SandyG Are you on the pre-release branch? That one has a bug where the font size change has no effect.

You can see the bug report here

For now you'll either need to adjust the size with css, or roll back to a previous version.

Yep, I spaced out and forgot to include the version. I updated to the v1.2.2 as I recall. Thanks for the heads up on the bug, I can wait until the fix is out and will try to remember to include the version!

1 Like