Prettier markdown editor?

No but isn't that exactly what you get anyway by using the two editors?

Why not just toggle off the viewer? It sounds like you just want plain text, which is what the editor does. You can use this button image to toggle the viewer/editor mode (it's in the top right corner).

If you don't like the styling in the editor (understandable), you just need to use a small amount of css to change it to be whatever you want. You can see the needed css here. You add this to your userchrome.css (Which can be accessed through Tools -> Options -> Appearance -> Show advanced).

I know this isn't ideal for you, but Joplin can't support a button for every styling option that users want (since that is basically limitless and is pointless when CSS exists and is so much more powerful).

That said, there are efforts in progress to make user styling easier (likely two clicks instead of one). So you're just a bit little to early into adopting Joplin to be able to take advantage of that.

And an example for posterity

No it isn't, the editor pane isn't plain text out of the box at all. And there is no simple option to make it so. As of now I have to use userchrome.css to make it even remotely resemble plain text. And it is a big hassle for me to have to keep the userchrome.css synced between all my computers when I update it, and I have a few of them.
A simple checkbox to turn of all text mangling done in the "hybrid" editor would simplify my life so much is all.
Didn't mean to start a whole debacle about it.

1 Like

This is what I have done since the dawn of time. As of right now, markdown in not of interest to me.

I wasn't aware of that, have been editing it manually on all my computers.
This simplifies my life somewhat. Thank you.

1 Like

Not to assign more homework tasks, but can you give an example/screenshot of how text looks in notepad and how it becomes mangled in Joplin?

I'd be happy to.
This is just some fragments I bundled together, but there are more stuff that gets mangled.
I discover more things as time goes by, have to find a solution to put in userchrome.css for that particular occurence, and then mirror the userchrome.css to all my other computers.
It's a hassle.

Notepad:


Joplin:

I get that you can't have a checkbox for every persons formatting preference. That goes without saying.
What I am humbly asking for is a checkbox for no formatting. At all.

1 Like

Ah thanks, the # as in 'commenting' and the # as in headlining. Same with `

I get you now, when you said "mangled" I was assuming you meant that data itself was getting lost in the process somehow, like if you were to paste into Word or something and you lost formatting marks, indents, spacing etc. rather than it just being a display issue.
Technically I guess it is possible that someone could just make a very simple plugin that could apply that simple CSS which would literally be what you want, a tickbox to turn "plain" formatting on for the markdown editor.

There is a topic where people were discussing the virtues and drawbacks of a number of other note taking apps (primarily trilium) and one of the things I did like was the ability to set the "type" of an entire note which would accomplish the same goal by preventing the editor from changing font sizes etc. rather than surrounding the note in backticks.

  • Being able to manually set note types - Joplin sort of has this already in that the "Markup" field can be either Markdown or HTML but it isn't something that can be set manually. I mostly would like to see it as a way to protect any HTML formatted notes from the markdown editor as well as being able to set entire "code" type notes that are excluded from formatting but can be distinguished at a glance.

Sounds wonderful.
I certainly wouldn't mind being able to choose code syntax highlighting type from a dropdown per note :slight_smile:
A simple "no formatting"-box in the settings would suffice though.

Yes. Also some strange coloring going on that I don't quite understand towards the bottom.
There are still some weird framing and italics going on that I still haven't found a solution for in css:
italics-framed
Above is with using userchrome.css:

.codeMirrorEditor * {
	font-size: inherit !important;
	color: white !important;
	font-weight: normal !important;
	text-decoration: none !important;
}

I just tried the following CSS which got rid of the inline code formatting (I'm just an idiot with notepad though so this is probably wrong for some other reason).

div.CodeMirror.cm-s-default span.cm-comment {
	background-color: transparent !important;
	font-family: inherit !important;
	border: none !important;
}
1 Like

We are getting off topic here, but thank you.
I added "border: none !important;" to my css, which indeed removed the border from text within backticks, but leaves a slightly different background color:
now
It also removed the cursor from the editor for some reason when I put it inside * of CodeMirrorEditor, so I had to move it to div.CodeMirror.cm-s-default span.cm-comment as per your suggestion.
Getting closer and closer to a "simple" css solution here :slight_smile:
The Italics above is still a mystery to me though.
Thanks for the assistance, appreciate.

Thats why I included all three lines - one to get rid of the background colour that is applied, one to remove the border and the other to use the same font rather than the "code" monospace font - all apply to the .cm-comment item which is the inline code block itself.

The italics are being applied because of the * 's (or at least I suspect).
Try adding

font-style: normal !important;

to the CodeMirrorEditor section.

1 Like

Should have read more carefully.
This is what I have now in my userchrome.css:

.codeMirrorEditor * {
	font-size: inherit !important;
	font-style: normal !important;
	color: white !important;
	font-weight: normal !important;
	text-decoration: none !important;
}
div.CodeMirror.cm-s-default span.cm-comment {
	background-color: transparent !important;
	font-family: inherit !important;
	border: none !important;
}

full

Italics is gone. Frame is back. Always something :slight_smile:

I'm not sure what the issue is there then. Mine now looks like:
image

Using

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

div.CodeMirror.cm-s-default span.cm-comment {
	background-color: transparent !important;
	font-family: inherit !important;
	border: none !important;
}
1 Like

I copypasted yours into mine, only changing black to white (am using the dracula theme)
1

for reference:

div.CodeMirror-lines * {
	font-size: inherit !important;
	color: white !important;
	font-weight: normal !important;
	text-decoration: none !important;
	font-style: normal !important;
}

div.CodeMirror.cm-s-default span.cm-comment {
	background-color: transparent !important;
	font-family: inherit !important;
	border: none !important;
}

Not sure what is going on. Let it be known that I never was and probably never will be a css-guy.
Thanks for your help with this.

Fixed it (I think) - just remove everything before span.cm-comment { for the second block.

1 Like

Awesome. Problem solved!
2
This, in combination with the fact that I can just copypaste the needed css easily from a note within joplin without having to browse to my joplin-portable installation from every computer is a very reasonalbe solution to my predicament.
Thank you very much for taking the time to understand my problem and on top of that solving it for me.

Here is the complete css if anyone else is in the same situation and want a quick copypaste:

div.CodeMirror-lines * {
	font-size: inherit !important;
	color: white !important;
	font-weight: normal !important;
	text-decoration: none !important;
	font-style: normal !important;
}

span.cm-comment {
	background-color: transparent !important;
	font-family: inherit !important;
	border: none !important;
}

And here is the shortcut to editing the correct file:


Once again. Thanks.

2 Likes