Plugin: Rich Markdown

Very useful !

Absolutely love this plug-in. Thanks so much!

I really wouldn't mind if this became part of the core and Joplin got rid of the rich text editor (make that a plug-in instead).

The rich text editor doesn't play nice with all content, plus the two buttons in the app are confusing. I really think this might the the best of all worlds - as long as it can be disabled of course, wouldn't want to upset @tessus :laughing:

2 Likes

Thanks, this put a smile on my face. I needed that today. It was a long and exhausting work day.
Just to clarify (not to you but as a general info), because I often come across as harsh or even hostile. Which is not my intention but often a consequence of unfiltered statements on my part.
(Although when people were to read those statements as they were, without trying to interpret them or reading between the lines, I would probably get less backlash.)

I am not inherently against rich text systems. But for me, as someone who writes technical papers or documentation rather in LaTeX than in a word processor with invisible formatting characters, I enjoy writing Markdown or plain text. Having it rendered into something presentable to the masses is a different story and I even enjoy that part.

But taking notes in anything other than a simple editor breaks my workflow, but the worst part, it distracts me - sometimes to the point where I lose my train of thought.
This is also a reason why I never use any form of autocorrect or spellchecker.

For others it's the complete opposite and I do get that. This is why I would never suggest to get rid of one or the other.

I'm also the complete opposite of Laurent when it comes to options. I want to configure the shit out of things. It doesn't matter, if they are hidden behind advanced/expert settings or if these modification are only achievable by hacking an internal data store/registry/config file.
But I do understand the other school of thought also. It's tempting to have just great default settings so that no options are needed.

6 Likes

Haha I'm kinda direct myself so I can honestly say you have never rubbed me wrong (yeah I know you meant to say that in general).

To the point: if (big if) this were to become a core feature, it could be another button to toggle it on and off, though in truth I am finding the two buttons a little confusing already. I think I would prefer a more permanent on/off switch in the settings. That is, of course, if it gets added to the base program :smile:

1 Like

Since you and tessus were discussing hacking the system, I think this is an appropriate solution to add to your CSS once you have this plugin enabled. It hides both the buttons. :stuck_out_tongue:

/* removes toggle for markdown / richtext */
button.tox-tbtn {
    display: none !important;
}
5 Likes

Yep, I have done that as soon as the buttons showed up. :wink:

P.S.: And I removed the spellcheck button for good measure.

2 Likes

Also a practical reason not to add too many options is because each of them adds some maintenance burden. Sometimes when I refactor the code, I come across options that were added with the argument that "it's just an option", like it was one line of code and we're done, even though now it's causing me trouble to update the code. In the end options have a way to creep in a bit everywhere, they can make the software less modular, harder to test, and harder to refactor.

And another reason to avoid options is to make the app simpler out of the box. That requires understanding the problem well, understanding what users want, it takes more time and is more difficult, but it benefits the project over the long term.

I agree however that there are cases where options can't be avoided and we do add some now and then.

9 Likes

Oohhh goodie goodie, I knew this forum would lead me down the dangerous hacker's path some day. Anything that happens from now on I shall blame on you :laughing:

You know, I haven't mucked about with CSS just yet, so you will need to dumb it down a little. I noticed in Appearance there are two CSS settings: custom stylesheet for rendered Markdown and for custom stylesheet for Joplin-wide app styles. Do I need to add the above lines to one of those, or is it yet another location?

1 Like

@CalebJohn I might have found a bug that only affects older notes (imported from Evernote). I noticed that on old files the image is not showing... yet on new images it is. I enabled show images by default, btw.

This is what it looks like and you can see the code is quite a bit different - it adds the name of the file, and displays it as a broken image. Yet the preview in split view can handle both just fine.

1 Like

Welcome, hacker! I am sure I have broken many people's Joplin with sketchy CSS. A reminder that removing said CSS is a good way to unbreak things. (And something to check before reporting a bug... not that I'd ever make that mistake, more than once. :stuck_out_tongue: )

You'll want those lines in "custom stylesheet for Joplin-wide app style" (people in the forum also refer to this by it's filename userchrome.css). The other file is for the read-only version of your note, which if you are using this plugin, you probably don't need/use anymore!

2 Likes

@Sophia do you know if it happens with notes that are just imported from evernote? I'll see what I can do to fix this.

@uxamanda thank you so much, you are amazing :heart: Weird duplicated buttons B gone!

@CalebJohn unfortunately I uninstalled Evernote and deleted my account last year, so I can't really test this. However I can replicate it even now with web clippings, so it isn't just an Evernote import problem. I didn't notice any of this before, because I hadn't enabled images yet.

For example this website (rather random and I'm afraid slightly feminine, haha): Free Teddy Bear crochet pattern - Amigurumi Today

It clips most (but not all) images like this:

However here is where it gets interesting. When I open that note on my Android after syncing, it shows correctly:

And lastly, when I disable your plugin, it shows correctly on my desktop (Windows 10) as well:

Hope any of that made sense :laughing:

4 Likes

Is there support for styling block quotes that are created with the ">" ? I'd like to be able to indent the whole line (not hanging indent)

Right now, I'm using this :

span.cm-quote {
    opacity: 0.7;
}

I mostly gave up styling quotes with a border on the left (or anything with some sort of inline display) like the viewer panel because selecting text within a quote become a complete unusable mess.

2 Likes

Your suffering is not wasted on me. I won't even try. Thanks for saving me time! :slight_smile:

Thanks for sharing the link and including the detailed screenshots. I wasn't able to duplicate this issue, but based on the screenshots I was able to figure out the problem.

I've just release v0.4.5 which includes a fix, let me know if it works for you!

1 Like

Yes!!! Working perfectly now, thank you so much! Now I can just use this plug-in and disable the split view permanently.

All that's left now is twist Laurent's arm and make this part of the core :sweat_smile::grin::stuck_out_tongue_winking_eye:

1 Like

So, yeah. Like I said, I blame @uxamanda for my new found hacker abilities :smiley: I have been playing a little with the CSS, thanks to the code she posted in here and a few other bits and pieces I found everywhere. Thanks again @CalebJohn for this plug-in, I'm really starting to like what the editor can do now!

This is what a test page looks like now:

CSS code (if this works for you, thank the people here, not me. if something doesn't work, blame me) :smiley:

userchrome.css (2.4 KB)

3 Likes

I'm wondering if there is a way to get real bullet points. So far I'm able to get this:
image

using this code:

.cm-variable-2.cm-overlay.cm-rm-list-token.cm-overlay.cm-rm-em-token {
color:inherit!important;
background-color:white!important;
height: 8px;
width: 8px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}

I'm wondering if anyone knows how the solid circle could be moved down.

Barely tested, so YMMV!

.cm-variable-2.cm-overlay.cm-rm-list-token.cm-overlay.cm-rm-em-token {
color: transparent !important;
background-color: white!important;
height: 8px;
width: 8px;
border-radius: 50%;
display: inline-block;
vertical-align: bottom;
margin: 0 8px 8px 0;
}
3 Likes