I’m running into something that honestly feels a bit surreal. In Joplin, my H2 and H3 headings look almost identical. Same size, same weight, same everything. My notes end up looking like a flat wall of text, and I’m starting to wonder if I’m the only person who actually relies on heading hierarchy to stay sane.
So let me ask this bluntly:
Is there really no way to make headings visually different in Joplin?
No built‑in option?
No hidden setting?
No CSS trick?
No secret plugin that only long‑time users know about?
Because if the answer is “no,” then I genuinely want to understand how everyone else has been surviving. Do you just memorize your heading levels? Do you avoid H3 entirely? Do you have superhuman Markdown vision?
I’m not trying to be rude — I’m honestly trying to figure out whether I’m missing something obvious, or if this is just how Joplin works and everyone has quietly accepted it.
I’d really appreciate hearing how you deal with this, whether you have a workaround, a hack, or even just a “yep, it’s annoying.”
Remember to fully quit (File > Quit) and restart Joplin after adding the css.
The example uses em but you could use px if you wish, or even sizes set by your browser such as xx-small, x-small, small, medium, large, x-large, xx-large.
There are ways to add your own CSS file to Joplin that should help manipulate the visual aspect of the headings in a more desirable way.
You can find more about Custom CSS which should be able to do what you want on your own (if you desire), see Introduction to customising Joplin. There is also Editor Themes plugin if you want to stay in the markdown world and have some more options.
I can definitely understand why you may want more distinction as well. It's probably mostly a personal preference as a whole. I mostly live in the markdown side of it and prefer the blandness of it and only switch when I'm going over something with someone.
The markup rendering inside the markdown editor (if you have render markup enabled in joplin settings) uses different CSS than the viewer, so you'd likely need separate css to target the rendering in the editor (and it would probably need to be placed in userchrome.css rather than userstyle.css). You can open the dev tools and use inspect element on headings in the markdown editor to try and determine what your css should target.
A few things that might help (aside from css changes) in the editor:
1. If you don't like the markup rendering, it can be disabled under Tools | Options | Editor | Render Markup in the editor. This would make it so headings show the markup characters (e.g. ## Heading, ### Heading)
2. Or, if you prefer to keep markup rendering enabled, I made a plugin a while back that shows a badge with the heading level next to headings in the markdown editor: Joplin Plugins - Heading Levels
3. Another way to clearly see the heading structure in a document would be using an outline/toc plugin, some available plugins for this are:
You appear to be using two different editors rather than just the Markdown editor. Your first screenshot possibly shows the Markdown editor set to "editor only" view which does not fully render the Markdown. (It shouldn't really render the markdown at all but people like making things fancy and complicated).
To explain...
Joplin has two editors that users can use for note-taking.
The icon shown by the arrow below is for the Rich-Text Editor. This is an all-in-one WYSIWYG editor for your notes.
The other button (in the red square below) is the Markdown Editor. The arrow points at the Toggle Editor Layout button which can be used with the Markdown Editor and changes the layout (or CTRL+L). Each time you press it it will cycle between editor only, split view and viewer only.
If you do not want to cycle between all three views when you press the Toggle Editor Layout button, the sequence can be controlled using View > Layout button sequence.
When you are using only the Markdown editor and you have toggled a view that includes the Markdown Viewer, you will see the heading text changed by the css. As the Markdown editor is not really a true plaintext markdown editor any more, if you use @bwat47's first suggestion and switch much of the fancy stuff off you will then see the actual markdown code (like in my screenshot below).
Thank you very much for the effort, but what I really need is for the rendering inside the Markdown editor to display ‘correctly’. I don’t want to use split view, and I don’t want to use the Rich editor.Is there really no way to modify how the Markdown editor renders the text?Again, thank you very much for everyone’s help.
