Plugin: Rich Markdown

[JeffW]

@whitewall

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.

It works. Thanks a lot.

@whitewall

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:

.CodeMirror-activeline .cm-search-marker{
background-color:transparent!important;
color:inherit!important}

Italic block is just for example. In fact, I want this behavior for all the markdown syntax, just like what typora and wiznote lite do.

[CalebJohn]

@JeffW

The > quote not supported. -> When you type ">" and space, the followed text is not shown as quote, as shown in the right pane.

Currently it shows it in the same colour as quote which is a compromise because it is not currently possible to show the little vertical bar. I'd like to one day have it, but it's not possible yet.

@JeffW

*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 .

Thanks to @whitewall for answering this

@JeffW

• 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 .

This is not behaviour from the plugin, this is handled by the main Joplin application. It will be fixed in the future.

@JeffW

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.

Likewise, this will be fixed in the main application soonish. But you'll be happy to know that if you use the markdown syntax to supply a language to the code block, then you will see syntax highlighting. This is a feature of the main Joplin application, not this plugin. I've attached an image for example.

@JeffW

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.

As I stated before, this recently became possible with the plugin interface. I plan on updating the plugin to add some default themes that I think you might enjoy. For now, this behaviour can be enjoyed if you're willing to use some custom CSS

I think between @whitewall and I we've answered all your questions. I hope you can enjoy using the plugin, even if some of your requests will take a bit of time.

[whitewall]

@JeffW

In fact, I want this behavior for all the markdown syntax,

Well, then you would have to figure out all of the different classes and re-define their css. @uxamanda , do you know a better way?

[uxamanda]

For some reason I cannot picture the behavior you guys are working towards. I think I am confused about this when the editor recognizes the markdown syntax does that mean when there is something like a # or - or something found you want to show it as, i.e. headline size, but not have the mark appear (this has issues because it breaks things when you try to copy/paste)? Or are you saying the opposite where you want the headline to be "plain text" while you are typing on the line and then render when you move your cursor?

[CalebJohn]

@uxamanda

are you saying the opposite where you want the headline to be "plain text" while you are typing on the line and then render when you move your cursor?

This is how i understood it. I think they're requesting that the current line should show markdown symbols, but all other lines should hide them.

Which for anyone reading this, it's already possible with a bit of CSS (user beware, systems like this are never perfect).

[franz-sp]

Hi everybody!
I am a happy user of this plug-in.
Honestly, I find it interesting just because it is isn’t like Typora.
It just renders markdown in a more intelligible way, and I am very happy with the balance that you guys found until now.
In case you decide to follow the Typora’s path (I personally don’t see any point in this, we already have a Rich Text editor, but it’s just my view), please leave the option to keep the enriched markdown as it is, very nicely balanced between code and readability.

Thank you for your outstanding work!

F

[CalebJohn]

Hi @franz-sp, thank you for the kind words. Indeed you and I have similar views. Actually the purpose of this plugin is not to replicate Typora, but do do exactly as you say, render markdown in a more intelligent way. This will always be the default view of the plugin, and anything else will be opt-in.

That said, the underlying editor from Joplin makes it very easy to enable an experience that is more similar to Typora, and I've gotten a few requests to make it easier to enable this behaviour. I don't see the harm in doing that.
My current plan in regards to styling is to have an easy way to toggle a more comprehensive theme, as well as the ability to toggle the markdown tokens. Basically just taking the behaviour that is currently hidden behind css theming, and making it available to less technical users.

[JeffW]

Thanks for the hints.

[CalebJohn]

v0.7.0

!IMPORTANT!

The default clicking key on macOs was changed from Opt to Cmd in this
version. This change was done to align with other mac applications that
offer similar behaviour. The Option key (alt on windows/linux) can be re-enabled
in settings.

• Use Cmd+Click for link on macOS
• Hide active line in code blocks
  • Some themes were incorrectly changing the background color
• Remove enforced monospace option
  • This is in the main app so this setting no longer did anything
    anyways

v0.7.0 should be available very soon.

[CalebJohn]

v0.7.1

This is a small bugfix release. The macOS theme plugin is setting some active-line colours which was making the active-line show up when not enabled in this plugin. The CSS scoping was changed to get rid of it. This might affect users who were manually changing the colour of the active line background (it won't be a problem if you use the CSS included in TIPS).

v0.7.1 should be available right away.

[whitewall]

I just noticed that right clicking on a link gives this:

Shouldn't it say open link?

[CalebJohn]

It's a generalized command, you can also use it to toggle checkboxes. In the future I might have it toggle images as well (if the cursor is over an image). I struggled for a bit to come up with something clear, if you have a suggestion for a better name I'll gladly listen.

[whitewall]

Ahh. I'm constantly amazed at all the software things we take for granted. In this case, what you have is fine. Sorry to bother you.

[roman_r_m]

I'm seeing an issue with version 0.7.1:
In an inline code block like `test`, put the cursor right after the opening backtick and try to select the text with Shift+right arrow. Then this happens:

When selecting with the mouse it's even worse - it starts jiggling around as the cursor moves.

[CalebJohn]

Interesting, this is what I see when trying to duplicate that
Without spellcheck

with spellcheck

Which version of Joplin are you on? I tested on v2.4.3.
There are still some issues that I hope to address, which might help with the issue you're seeing.

[roman_r_m]

@CalebJohn

Which version of Joplin are you on? I tested on v2.4.3.

I'm on 2.3.5:

Joplin 2.3.5 (prod, linux)
Revision: 819af3c

Disabling spellcheck does not seem to make any difference.

[whitewall]

@CalebJohn, I just noticed that in blocks of code (set off with ```) that images are rendered under the html image tags if I have that option selected. Is it more appropriate to have this feature not apply to code blocks, since usually code blocks ignore all other formatting? It's not a big deal, I just thought it was odd seeing those images there.

[CWPfVTkNBMyfdFW]

To expand on this, is there a way to disable all rendering (bold, italics, superscript, tokens, everything really...) in code section, but also in katex? Because I recently noticed things like ${B_2}^3 = K^4$ don't work well at all, especially with token hidden outside of the active line...

I got somewhat acceptable results with my userchrome.css when trying to disable the rendering in code sections, but I don't think I can get it working for katex.
@CalebJohn Would you consider an option to disable all rendering in code and katex sections? Leaving only the syntax coloring from the core app.

[CalebJohn]

@whitewall

Is it more appropriate to have this feature not apply to code blocks,

Nice catch! That will be fixed in the next release.

@CWPfVTkNBMyfdFW

Would you consider an option to disable all rendering in code and katex sections? Leaving only the syntax coloring from the core app.

This has been on my todo list for awhile and I've made some progress towards it (disabling my plugin inside of inline code blocks and comments). I think inline katex should be relatively simple (but will need changes to the core app). The code block (and katex block) might be more difficult. I'll need to look in to it. For now, I've created an issue on github to keep track of this.

[CalebJohn]

Sorry to leave you hanging here, I forgot to get back to you about this and just saw this again now. This was an issue with v2.3.5 and is fixed in v2.4.1 and above. This is the PR that fixed it. The problem was that there was padding surrounding inline code blocks, and when you make a selection it breaks up the code block, which results in the padding getting placed on either side of the selection.