Plugin: Rich Markdown

Great idea! Checked boxes have the cm-property tag and unchecked have cm-meta. Maybe you can use those to distinguish?

1 Like

How does it work with copy and paste? Does it copy the [x] or the [✓]? (or both?)

1 Like

@CalebJohn thanks!
@laurent it does copy as - [ ] and -[x] (on linux)

Peek 2021-04-21 20-46

There is slight difference between checked/unchecked style.

Dirty hack is to just create all checkboxes with :after pseudoclass.
I didn't found any other way to make them look exactly the same (but i'm not whiz at Css).
It also copies -[ ]/-[x] verbatim .

Peek 2021-04-21 21-01

Css with the hack:


.cm-property.cm-jn-monospace.cm-overlay.cm-rm-checkbox.cm-overlay.cm-rm-list-token {
    font-size: 0px;
}

.cm-property.cm-rm-checkbox:after {
    content: "[✓]";
    font-family: monospace !important;
    font-size: 14px;
}

span.cm-meta.cm-jn-monospace.cm-overlay.cm-rm-checkbox.cm-overlay.cm-rm-list-token {
    font-size: 0px;
}
span.cm-meta.cm-jn-monospace.cm-overlay.cm-rm-checkbox.cm-overlay.cm-rm-list-token:after {
    content: "[ ]";
    font-size: 14px;
}

Css without the hack
.cm-property.cm-jn-monospace.cm-overlay.cm-rm-checkbox.cm-overlay.cm-rm-list-token {
    font-size: 0px;
}

.cm-property.cm-rm-checkbox:after {
    content: "[✓]";
    font-family: monospace !important;
    font-size: 14px;
}

@CalebJohn There seem to inconsistency as how checkboxes are treated in lists.
Peek 2021-04-21 21-27

Checking/unchecking with mouse still works
but the classes for both states are:

cm-link-text cm-overlay cm-rm-checkbox cm-overlay cm-rm-list-token

Element looses styles from snippets above.

This looks really great @ambrt! Do you mind if I add it to the list of tips?

This is because markdown treats something indented by 4 spaces as a code block and the rich markdown plugin doesn't correctly detect when something is in a code block.
Just change your markdown to

1. This is a valid list item
    - [ ] text

And everything should behave correctly.

1 Like

No, not at all. Please do so.

Oh, right! I forgot about it.

v0.4.0

  • Add support for ++insert++, ^sup^, and ~sub~ syntax
  • Add workaround for horizontal rules when extraCss is enabled
  • Add support for html <img ...> tags
  • Add active line highlighting
    • Doesn't highlight by default but css can be used to set a colour
    • Can also be used for more dangerous styling

The plugin update has been pushed and will be available shortly.

1 Like

Thanks for the update! Couple notes based on things I ran into:

In case it trips someone up, it seems like these need to be turned on in Preference > Markdown to appear.

FYI, this might be theme dependent – with Atrium Dark this appeared by default. You can hide the background with

.CodeMirror-activeline-background {
    background: transparent !important;
}

Thanks @uxamanda I always appreciate your feedback.

Thanks for mentioning that, I forgot about it in the update. Because these syntaxes are partially supported in the main app via settings, I wanted to make sure that the user only had to toggle them in a single place. This also makes sure that the user only has to toggle these once.

Looks like it is. That's a bug. I'll push out a point release that removes it by default on all themes. Ultimately I'd like to add this as a setting rather than having to use css, I think it will be handy for some users.

3 Likes

So this is a minor issue but when selecting text that is already highlighted, it's a bit difficult to see what is selected since it is behind the yellow highlight:
image

Ideally it would be layered over the yellow highlight like in the viewer pane.

2 Likes

Fortunately it was also easy to fix, I've pushed v0.4.3 with the expected behaviour.
Thanks for reporting this, let me know if you have any more "minor" issues.

3 Likes

I spotted minor issue with new ^sup^ support. If I'm using multiple footers/references in the same line the inline superscript is rendered instead as shown in the picture:
image
Is there a way to to at list recognise the reference square brackets and disable superscript in that case?
Anyway this I'm in love with Rich Markdown Plugin and thank you for it. :slight_smile:

1 Like

Looks better now, thanks! I do think there's one more thing about it that could be improved which is to allow the yellow highlight to still show underneath the selection.

image
Notice in the viewer pane you can still see a bit of where the text is highlighted underneath the blue selection. It's subtle but I do think it makes a difference.

I just pushed a fix for this (v0.4.4), glad to hear that you're enjoying the plugin! Please let me know if you notice any other issues.

Very subtle! I've updated to something similar but not quite as subtle.
image

2 Likes

Looks perfect now!

1 Like

Hello there, first of all thank your for this plugin. It really helps me staying in the editor and being faster at taking notes.

Here is something I found that might be useful for others:

  • Hide URLs from links and only show them when you are selecting the line the link is on
/*Hide URLs */
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after {
    content: '';
    font-size: 1rem;
}

Changing the content attribute allows to show a symbol after the link title.

Source: Hide or Truncate URLs in Editor using CSS? - #13 by bernardo_v - Resolved help - Obsidian Forum

7 Likes

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