Monospace editor font size is no longer consistent

Under Options> Appearance> Editor font family, I have a blank field, which defaults to "a generic monospace font" and I have the "Editor font size" set to 13.

However, the note editor now displays the monospace editor font size in different sizes based on markdown tags. Aren't markdown tags supposed to be interpreted in the right side (note viewer)? Why does the font size change in the editor when I have it set specifically to a certain value?

For example, when I enter a line beginning with #, the text behind that markdown increases the font size to some value larger than 13 for that line, I'm guessing 20 or something.

Isn't the Joplin methodology supposed to be that the left side / editor side is where the user enters his code/data mix without rendering/interpretation, while the right side / rendered side should show the rendering of the markdown? Why are these getting mixed up now?

This image is from the Joplin website:

My issue is that all of my 3200 Joplin notes have been relying on using the "# " markdown tag to show visual headings on the rendered side, while allowing the left side remain text only. I am not interested in visual presentation on the left side; that's the right side's job. Now I need to edit all my notes just to remove this cutesy formatting that was never there in the first place?

Can you add a checkbox option to turn this behavior off or at least adhere to a standard editor font size as specified in Options?
Thanks!

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

1 Like

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

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