Plugin: Rich Markdown

Plugins
1

Introducing Rich Markdown

Rich markdown is a fairly ambitious plugin, and is my attempt to get rid of the markdown viewer.
To do this I've started by adding functionality that displays images in the editor (on hover or between lines), and functionality to click on links and checkboxes.

I have a few small quality of life adjustments to make still, but this might never get there as this plugin in it's current state has been enough to get me editor only for the past few weeks.
If anyone has a feature request, please let me know, if I like the idea I'll likely jump on implementing it myself, or I'll be available to help support others to bring the feature to Rich Markdown.

image
image842×645 46.7 KB

The plugin is not yet in the Joplin plugin repository but should be in the next day or so!

35 Likes
2

Wow, pretty cool. Personally it's too close to WYSIWYG, but it's great to have the option. Also, who knows, I might even warm up to the idea. That is if it does not mess with my markdown code.

1 Like
3

Thanks!

The only time it will mess with your markdown code is if you enable checkbox toggling with Ctrl+Click. All features can be enabled or disabled according to personal taste.

3 Likes
4

really nice! I don't want to leave the markdown editor either.

one small comment. I have many links within checklists. when such links are ctrl+clicked, checking the list item takes precedence over visiting the link. I would expect the link to work when the clicked text is the link itself.

5

Thanks for letting me know!

I've just pushed the v0.1.1 release fixing this issue. It also has the bonus side effect that images with external links (e.g. ![alt text](https://imagesourceurl.com)) are now clickable.

3 Likes
6

Congrats @CalebJohn ! I've been waiting for exactly those things for quite a long time (especially inline image support and the ability to check checkboxes).

Would it be possible to work with Joplin that they can support those things natively?

Thank you very much for your work!

7

I've installed the plugin and restarted. I have "Follow note links with Ctrl+Click" selected as well as "Require Ctrl when clicking links".
I get the hand pointer when I hold ctrl and hover over a link. But when I click, nothing happens.

I'm running Joplin 1.7.11 (prod, win32)

Let me know what info you need. I'm really exited about this plugin.

8

thanks for the quick fix! like the fact that it works for internal Joplin links as well.

1 Like
9

Hi! Thank you for developing this amazing plugin!
A small feature request: one of the few things I miss in the markdown editor is a different way to render the highlighted text, like this one.
Just to be clear, I don't mean that the editor should become anywhere close to WYSIWYG: I just think that highlighted text should look a bit different. Actually in the same way that bold, italic, citations, and code are rendered in the editor. We highlight text to make it recognisable at a glance. Switching to the viewer just to see the highlights is a bit counter intuitive. I tried to achieve this by playing with the editor configuration file in MacDown, but was unable to get any result. I hope that it could be implemented in Joplin, some day.

Thank you for your attention, and for your work.

3 Likes
10

From a technical perspective it's definitely possible to implement such functionality in the core. But I think the current development direction of Joplin will lean more on using plugins to add extended functionality such as this.

2 Likes
11

If you toggle the dev tools (Under the Help menu). Do you see any errors when trying to click a link?

1 Like
12

Thanks for the suggestion @franz-sp!

It should be fairly simple to implement, you can expect an update later this week (or next) that will include the ability to highlight text.

2 Likes
13

Should I be looking under the Console tab? If so, nothing new appears there when I try to click a link.

1 Like
14

Ah that's great news, I was just coming to suggest that (styling highlights). Will be great. Love this visual markdown. It means I can edit, with visual feedback, without having to view a second preview window separate to my note taking.
Keeps the markdown plain text method of inputting notetaking, (avoiding having to use the mouse for styling), while getting the visual feedback of the markdown. Nice.

2 Likes
15

By the way, how do you create highlighted text in Markdown? There's no official markup so I guess you create a <span class="hl"> with custom styling, or is there some other way? Just trying to get a sense of how it's done in general as I'd like to add support for it in Rich Text editor too.

2 Likes
16

Isn't ==highlight== supported? It works for me. Although in the editor there doesn't seem to be a class assigned to text with that markup.

1 Like
17

Right, I missed we already had a plugin for this, and it seems that == is indeed the commonly accepted syntax - Highlighting text with the <mark> element - Extensions - CommonMark Discussion

I guess the standard alternative would be to use <mark></mark> but of course that's more verbose.

2 Likes
18

I've almost finished a plugin that will allow text to be highlighted in different colours using <MARK></MARK> or the <SPAN> tag, but have one final problem to resolve here -

https://discourse.joplinapp.org/t/codemirror-resetting-cursor-in-text-insert-update/15115

1 Like
19

Thanks for your quick answers @CalebJohn and @laurent.
@laurent , Joplin already supports both ==mark== and <mark>mark</mark> syntax, as @whitewall pointed out.
More specifically, ==mark== syntax is supported via a tick box in the Markdown preferences, while the <mark>mark</mark> syntax works out-of-the-box, as far as I know (that is, the <mark>mark</mark> syntax seems to work even if the if the tick box in the markdown preferences ins't checked).
Hope it helps, thanks

3 Likes
20

Yes it should appear in the console tab. What browser do you use on your computer?

1 Like