@whitewall
Looks good! To be honest this is a bit of a grey area for me, and I haven't completely made up my mind about it. I actually slipped some css to do this into the TIPs, but didn't advertise it .
I've been thinking this as well. To start with I was just planning on having a toggle for a fully themed version. But it makes sense to have a few smaller, more granular controls like this. I'll probably have a few options in the settings menu (maybe a dropdown?) for themes. As well as a couple of commands to toggle the active line token highlighting and focus mode. This only really just became possible with the latest pre-release of Joplin, so it won't be immediately available, but it is next on my todo list for the plugin.
Thanks for the suggestions and thanks for sharing your css!
And for everyone else, please check out my CSS TIPS for a better markdown experience!
This is fantastic, I can't believe I missed it for so long. Thanks a lot for mentioning it.
For some reason, I had to update manually with this version (no update prompt in Joplin, even after 5 days), I don't know if there's a relation.
This is great. Would you consider doing the same with quotes? I mostly gave up on styling them because I couldn't get a border-left without ruining text selection on multiple lines.
I have actually noticed a little bit of wonkiness with this, the hiding of tokens. Which must be why you put it in the at-your-own-risk section.
If you click at the end of the line, the cursor appears positioned within the line for the number of characters worth of hidden tokens. In this cast below, I'm just clicking and typing. The cursor really is at the end of the line which you can see by my typing.
Not a deal breaker.
That's odd, I haven't encountered this so far (with the css snippet on github), but it looks like my problem with quote styling. Are you using some sort of display: inline in your css? I feel like this may be related to your Title line formatting. In my case, it became completely unusable if the quote was wrapped on multiple lines.
I tried your css file, but I can't reproduce it, even with the line numbers and folding plugins. I'm almost out of ideas at this point, maybe someone else will have an better understanding of this.
Looking at your css file, I see a lot of font-stretch: extra-condensed!important;, have you tried commenting them out? But I don't see why it would only start being a problem now. In fact, do you have this problem without custom css?
Looks like I forgot to publish the latest release, Oops! I've pushed it up now, thanks for letting me know.
Good call, I'll do this for the next release.
I can also reproduce this consistently. Funny enough, if you enable spell checking in the markdown editor (from the options menu) then the issue is resolved. You don't actually need to enable spell checking from the globe icon, just enabling the beta feature seems to make this work.
I'm totally just guessing, but it seems like the cursor is being placed in the editor physically where you click (before the css to show the token is applied) but then once the css is applied it remains logically where you wanted it. Perhaps the spell checker process changes the timing of these things so the cursor goes physically where it should be.
Close, when that option is selected the editor will use an entirely different component under the hood. Typically CodeMirror will handle cursor placement itself, but when the spellchecking beta is enabled it relinquishes control of the cursor to Electron (kinda) which apparently can handle the tokens appearing and disappearing better.
This is exactly what I expect from Joplin. I expect the feature just like Typora. The Rich Markdown takes the first step toward it. Thanks for writing this plugin.
Some reports:
Bug reports:
The > quote not supported;
Unordered list not supported;
When preceding mark is inputted, the rendering works. It's good. But if the succeeding mark does not show up, the rendering does fall back.
Features requested:
After rendering, the marks being hided. But it shows up again when the cursor is on this line.
Hi @JeffW , I'm glad you like the plugin, but could you be a bit more detailed about your feature requests? For example you say that the quote (>) is not supported, but I don't know what you mean by supported. In general I try to be open to feature requests, but I have to understand what you're requesting to do that
Please provide more details on the following points:
This is already possible for the more technical users (see above), and I'll be making it more accessible for the rest very soon.
The > quote not supported. -> When you type ">" and space, the followed text is not shown as quote, as shown in the right pane.
Unordered list not supported. -> As you may find, the rendering of the ordered list in the left pane is basically the same as that in right pane. But unordered list is not, just shows *.
When preceding mark is inputted, the rendering works. It's good. But if the succeeding mark does not show up, the rendering does fall back. -> I inputted *, and the following Italic is shown in italic. But if I did not input the right * and input return, the correct action should be changing the italic font back to normal, and showing " * Italic". But the plugin still showed * Italic.
Besides, the code inline and code block features are not supported, yet. -> The same, when input ` or ``` leaded block, the block is not rendered as code.
After rendering, the marks being hided. But it shows up again when the cursor is on this line. -> I hope to have the feature, when the editor recognizes the markdown syntax, it automatically renders the text followed, without showing the syntax symbol. But when later the user moves the cursor back to the rendered text, it shows the original text (no rendering). When the cursor leaves, it renders again.
What is it that you expect to be done in the editor? If you want to replace the *s with dots, you can use the following css:
/*make markdown tokens for list into dots*/
.cm-overlay.cm-rm-list-token.cm-overlay.cm-rm-em-token
{
color: transparent !important;
background-color: #DECB6B!important;
height: 6px;
width: 6px;
border-radius: 50%;
display: inline-block;
vertical-align: bottom;
margin: 0 0px 8px 8px;
}
Note: this only works for me when I use *, not -, as the token.
You should be able to do this using css. Just add something to select the italic text within the current line. Or are you wanting some kind of selector for being inside the specific italic block of text? Meaning you only want this behaviour when you are within the italic words? That I don't believe is currently supported with the plugin. But if you simply want the current line to turn back into plain text, that should not be difficult with CSS.
EDIT: OK, the following seems to work to change highlighted text back to normal in the current line:
.
