Plugin: Rich Markdown

That's a good point, it would make sense to apply to all of them. What do you think the behavior should be if a user selects multiple lines that have both checked and unchecked boxes?

  1. Toggle all individually
  2. Uncheck all
  3. Check all

I hesitate to add features that don't exist in the markdown viewer, i think it adds confusion for most users. I would consider adding support for that header checkbox syntax (I saw it in a thread from a few days ago), if/when it's supported in the main app.

1 Like

Thank you very much for your response :slight_smile:

The ideal would be to have the 3 options :slight_smile: . The ones that would be most useful to me would be 2 and 3 (Uncheck all and Check all)

If this is not possible, and if the function is still called Toggle checkbox, the most logical one would be Toggle all individually.

I also use the plugin Reset Checkboxes which allows me to Uncheck all checkboxes, and following my request to the developer @kamer, he added the possibility of uncheck checkboxes only on the selected text, thanks to him :slight_smile:

With your 2 plugins, the checkboxes will be under control :wink:

I understand
In this regard, although checking and unchecking these boxes on the title does not work, when you press CTRL the little hand is displayed, we might believe that it could work, but no :wink:
image

1 Like

Fair point! I'll look into making it work (or fixing the hand, we'll see)
edit: It was fairly easy to add the requested feature. It will be available in the next release.

2 Likes

Version 0.15.0 was just released. It supports checking selections.

The ctrl+click (and ctrl+enter) behaviour remains the same (toggle checkboxes). But this adds 2 new right-click menu entries, one for check all, and one for uncheck all.

I also went ahead and added support for toggling titles that are formatted like checkboxes.

7 Likes

Wow, amazing, thank you very much, it is perfect :slight_smile:

In the Markdown viewer, title checkboxes cannot be checked or unchecked with a click, but I don't think the plugin can do anything about it...

Hi,

I noticed two little issues:

1- Checkboxes actions of the context menu are not displayed if the last line of the selection does not contain a checkbox:

Joplin_2024-05-16_10-16-16

I've gotten into the habit of paying attention to the end of my selection and so I can live with this behavior, but I wanted to point this out to you in case there is an easy way to correct this

2- Internal links to anchors of other notes do not work from the editor (CTRL) if the titles contain checkboxes. If I remove the checkbox from the link, it works whether the box is checked or not:

Joplin Rich Markdown_Anchor links with checkboxes issue_2024-05-16_16-42-56

As for the first problem, I can live with it, I wonder if it is not better to remove the check box from the link, which means that it will work, whether the box is checked or not :thinking:

Thanks :slight_smile:

The fact that I don't necessarily arrive at the right section in the note linked is, I think, another problem.

Thank you for the reports @nonobio, I don't have time to fix them right away but I've tracked them on github so they don't get lost.

And as for anchor links not scrolling to the right place, that is indeed a limitation of the current version, it is high priority for me to fix.

3 Likes

Thanks :slight_smile:

Are you talking about the current version of Rich Markdown or Joplin?
Because for me the problem is present even without any plugin installed (without Rich Markdown).

There are two things I notice:

  • Sometimes the note is not positioned at all in the right place, whether in the editor or the renderer.
  • Sometimes it is positioned well in the renderer but not in the editor (this is where I have to move the text up or down on the renderer side so that the editor aligns it).

I was talking about rich markdown, but I see now that you're talking about a different issue. You should report it on the Joplin issue tracker.

Thanks, it's done:

Hey @CalebJohn ... sorry for being cheeky, but thought I would try my luck again...

Do you think any chance of implementing PDF preview being displayed inline in the markdown editor, especially since v3 has now added support for loading PDFs with imaging API.

I am fine for you to give the same answer as last time, but thought I would forward this new info :wink:

1 Like

Wanted to share some RM CSS tricks. Each one is made up of two parts:

  1. JSON to be pasted into the settings at Rich Markdown --> Advanced Settings --> Custom classes JSON. This creates new CSS classes out of text patterns.
  2. CSS to be pasted into Joplin's userchrome.css (AKA Appearance --> Custom stylesheet for Joplin-wide app styles).

Highlight tags in the editor

Preview:

  1. JSON:
[{ "name": "rm-tag", "regex": "(?<=^|\\s)([#@+]|\\/\\/)([^\\s#@+]*\\w)" }]
  1. CSS:
div.CodeMirror span.cm-rm-tag {
    background-color: #7698b3;
    color: white !important;
    padding: 0em 2px;
    border-radius: 5px;
    display: inline;
}

Colour-coded checkboxes in the editor

Preview:
image

These [x]it!-inspired checkbox styles represent various possible states of tasks. (See also this plugin, which renders these checkboxes in a panel.)

  1. JSON:
[{
	"name": "rm-xitOpen",
	"regex": "(?<=^\\s*)[-+*] \\[ \\](?=\\s.*)"
},
{
	"name": "rm-xitDone",
	"regex": "(?<=^\\s*)[-+*] \\[x\\](?=\\s.*)"
},
{
	"name": "rm-xitOngoing",
	"regex": "(?<=^\\s*)[-+*] \\[@\\](?=\\s.*)"
},
{
	"name": "rm-xitObsolete",
	"regex": "(?<=^\\s*)[-+*] \\[~\\](?=\\s.*)"
},
{
	"name": "rm-xitInQuestion",
	"regex": "(?<=^\\s*)[-+*] \\[\\?\\](?=\\s.*)"
},
{
	"name": "rm-xitBlocked",
	"regex": "(?<=^\\s*)[-+*] \\[!\\](?=\\s.*)"
}]
  1. CSS:

I included an extra commented line in each class for optionally highlighting the checkbox.

div.CodeMirror .cm-rm-xitOpen { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #4178be !important;
    font-weight: bold !important;
    /* background-color: #a3c3f5 !important; */
}

div.CodeMirror .cm-rm-xitDone { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #64a073 !important;
    font-weight: bold !important;
    /* background-color: #b9d7bf !important; */
}

div.CodeMirror .cm-rm-xitOngoing { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #cb55c2 !important;
    font-weight: bold !important;
    /* background-color: #ebace8 !important; */
}

div.CodeMirror .cm-rm-xitObsolete { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #999999 !important;
    font-weight: bold !important;
    /* background-color: #c4c4c4 !important; */
}

div.CodeMirror .cm-rm-xitInQuestion { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #cc913f !important;
    font-weight: bold !important;
    /* background-color: #e9c79f !important; */
}

div.CodeMirror .cm-rm-xitBlocked { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #e22d2d !important;
    font-weight: bold !important;
    /* background-color: #f5aaaa !important; */
}
10 Likes

Does anybody know if this plugin is known to be safe privacy-wise? Their latest version 15.0.0 doesn't seem to be on Github...

v0.15.0 is on github, I just didn't bother manually creating a github "release" for it. I just pressed the release button so it should be safe now :slight_smile:

1 Like

Hi,

Is this plugin supported in version 3.x? I just updated Joplin to 3.0.13 and installed this plugin (0.15.0), but I have a few of issues and/or don't understand how it works.

Are "plain text" links supposed to get styled automatically? I can Ctrl-click to follow them, but they are not colored or anything.

Using Stylish, horizontal rules that have spaces in between the characters (eg * * *) are rendered strangely. Even with spaces it looks a little strange, with the markdown barely visible and a tiny cursor. I also don't get any side margin like in the screenshot, which causes the header markdown to disappear.

I have enabled the "add extra CSS classes" option.

bild

Before I create the issue, I'd like to ask if this feature is interesting enough to be in scope for this plugin

Clickable URL on image

![ [image label to display](URL) ](/:resourceid)

Example: label underneath the image is supposed to be clickable - opens Youtube page


Fig 1. Joplin Tutorial - Joplin Note-Taking App Tutorial - YouTube

Code for the preview block: ![[Joplin Tutorial - Joplin Note-Taking App Tutorial - YouTube](https://www.youtube.com/watch?v=emiwyNQa12Q)](upload://nrUa7d8DKTMlOEkwtnbSLJz8fs6.jpeg)

Use cases

  • Video/webpage thumbnail preview (can automated with Custom Copy of FoxyTab Firefox Plugin)
  • app launcher dashboard grid
  • attachments preview
  • ? potential note preview
  • webarchive: potential to easily recreate static HTTP elements in note's body

Notes

  • CM6 renderer supports this feature out of the box but it doesn't work in TinyMC
  • This feature is more like a markdown hack but surprisingly supported widely enough, although underutilized for some reason
2 Likes

Thank you for your custom checklist setup.
Is there a way to define how it!-inspired checkbox styles are displayed in the viewer or when exported to PDF?
For example, to make that [?], [@], [!] & [~] are also displayed as bullet points or bullet points with specific formatting.

Additionally, is it possible to do the same thing for tags - to have the same highlighting in rendered markdown output?

This requires a different kind of plugin (that focuses on the renderer), such as this one (an example for highlighting some tags specifically next to checkboxes). I'm not familiar with a generic renderer customisation plugin for Joplin (where a user might define [x]!it checkboxes in its settings), or one that is dedicated specifically to styling checkboxes.

1 Like

I just upgraded to Joplin 3.1.20 and none of the styling I had for Rich Markdown works. My css file is still there.

Am I the first person to experience this?

ETA: When I switch back to the legacy editor it works again.

my info

Joplin 3.1.20 (prod, win32)

Client ID: 55ce0b2fbc8e4c0c8c573a6923b41b59
Sync Version: 3
Profile Version: 47
Keychain Supported: Yes

Revision: 8199362

Backup: 1.4.2
Better Code Blocks: 1.1.0
CodeMirror Line Numbers: 2.0.0
Ez Table: 1.0.2
Favorites: 1.3.2
Insert Date: 1.0.1
Note list (Preview): 0.0.1
Note list and sidebar toggle buttons: 1.0.3
Note Tabs: 1.4.0
Outline: 1.5.13
Paste Special: 1.1.2
Persistent Editor Layout: 2.2.0
Remove Images: 0.0.2
Reset Checkboxes: 1.0.3
Rich Markdown: 0.15.0
Search & Replace: 2.2.0
Table Formatter Plugin: 1.2.1
Templates: 2.4.0

1 Like

Hi, I meet maybe a similar issue, I lost the "yellow highlight" with "double =", I opened an issue here : Issue : "==text==" is not anymore highlighted since Joplin 3.1.20 (Mac OS) · Issue #68 · CalebJohn/joplin-rich-markdown · GitHub