Got it, thanks! Maybe I'll keep them but good to know I have options.
There seems to be an issue with list indentation when there is a very long word or a URL without a "-" in it. In these cases the text gets put on another line.
By the way I've really been liking this plugin and excited to see the additional functionality being worked on!
1 Like
Hi @shbach
I'm glad you're liking the plugin! Thanks for the report.
This is actually a bug with the way Joplin handles lists made up of a single word. You can try disabling the plugin and you'll see that the issue persists.
Oh I see I didn't realize that this was a bug with Joplin that couldn't be fixed by this plugin.
Quick idea: convert checkbox into checkmark with just css (to keep "x" inside content)
For mockup:
.cm-link-text.cm-rm-checkbox {
font-size: 0px;
}
span.cm-link-text.cm-overlay.cm-rm-checkbox:after {
content: "[✓]";
font-size: 15px !important;
}
The problem is that there is no way to distinguish between checked and unchecked todo so css above is always checked.
If a class could be added like .cm-rm-checkbox-checked
maybe it could be done.
2 Likes
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)
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 .
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.
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:
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:
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. 
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.
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.
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