Plugin: Rich Markdown

[jb261]

@whitewall

I wonder if it would be possible to include the rendered toc somehow when we have inserted the [toc] tag. As it is now, I am using the css to cause the rendered toc to fly in when the cursor touches the right hand border. I'd love that to be a possibility even when in the markdown editor.

Why not use the Outline plugin and have the outline always viewable?

[whitewall]

@jb261

Why not use the Outline plugin and have the outline always viewable?

Very small laptop. And not all of my notes have toc's.

[jb261]

@whitewall

Very small laptop. And not all of my notes have toc's.

Outline plugin doesn't need ToC, it will show all headers. I used ToC's until that plugin came out, then I deleted all the ToC's as they are unnecessary clutter if using Outline plugin.

Do you have sidebar or note list enabled? If so, you could drop the Outline panel below of above sidebar or note list, so it doesn't take up any additional screen real estate.

[whitewall]

@whitewall

And not all of my notes have toc's.

Sorry, what I meant was, not all of my notes have internal headings, so they don't need a table of contents. So for all those the outline panel is empty.

And, yes, I do have it stacked at the moment under the notes list. I suppose that once I have more notes than the space allows I should just break them down into sub notebooks.

Anyway, sorry for the derail. I still think the fly-in toc would be handy for some people as a rich markdown option. But I realize it may not be feasible.

[jb261]

@whitewall

Sorry, what I meant was, not all of my notes have internal headings, so they don't need a table of contents. So for all those the outline panel is empty.

The most recent version of the outline plugin autohides the panel for notes w/o headers.

[franz-sp]

Thanks very much for implementing the highlighting in the new version!.
Strangely it does seem to work in my new notes, but not in the existing notes. It is just me? It seems a minor issue though!

[CWPfVTkNBMyfdFW]

@CalebJohn Hey, thanks for the great plugin. The new custom css classes with some tips looks absolutely fantastic.

One thing I noticed is that links to another section of a note as generated by the Outline plugin (by right-clicking a header in the outline panel) aren't working in the editor panel, they are opened by my browser instead of Joplin.
Normal note links look like :/5fd8e4sg654drgd5g8, and links to a section are like :/5fd8e4sg654drgd5g8#section-title-here.

EDIT: And now I realise it's mentioned on your GitHub page, so don't mind me...

Reference Links are not supported yet.

[sgtoutlaw]

I am not sure if it is just me, but it seems that the == markdown syntax will only highlight in the editor if it is one word.

==hello==

works

==hello world==

doesn't

[CalebJohn]

@franz-sp

Thanks very much for implementing the highlighting in the new version!.
Strangely it does seem to work in my new notes, but not in the existing notes. It is just me? It seems a minor issue though!

@sgtoutlaw

I am not sure if it is just me, but it seems that the == markdown syntax will only highlight in the editor if it is one word.

I think these are probably related. I've updated to fix this. It will be available in the next release.

@CWPfVTkNBMyfdFW

One thing I noticed is that links to another section of a note as generated by the Outline plugin (by right-clicking a header in the outline panel) aren't working in the editor panel, they are opened by my browser instead of Joplin.

Glad you're enjoying it! This is a bug, reference links are a specific markdown format for creating links. For now I will stop these links from opening in the browser, and support for the anchors will come at a later date.

[whitewall]

When I enable custom css classes, the # to create headings are on a different line from the actual heading text. Is this by design? It's that way even without the css in your tips. I tried using that css and setting display:inline but that didn't seem to fix it.

So here is without custom css classes turned on:

And here is with it turned on

As well, not all headings seem to have the custom css added, but I can't figure out why. Here is the html for a header that doesn't have the custom css:

<pre class=" CodeMirror-line " role="presentation">
  <span role="presentation" style="padding-right: 0.1px;"> 
    <span class="cm-header cm-header-1"># 16/01/2021
    </span>
  </span>
</pre>

looks like:

And here is for one that does:

<pre class=" CodeMirror-line " role="presentation">
  <span role="presentation" style="padding-right: 0.1px;">
    <span class="cm-header cm-header-1 cm-overlay cm-rm-header-token"># </span>
      <span class="cm-header cm-header-1">26 dec
      </span>
    </span>
</pre>

Looks like:

Doesn't really tell us much that I can see.

[CalebJohn]

I can't reproduce any of the issues you see here.
Is it possible that the newline bug is due to something in your userchrome.css? Can you test with your userchrome.css disabled?

@whitewall

As well, not all headings seem to have the custom css added , but I can't figure out why. Here is the html for a header that doesn't have the custom css:

Is this reproducible? Do the same headings always fail? if so, can you export a note that exhibits this behaviour and send it to me? I'd like to troubleshoot this but I can't seem to reproduce it.

[whitewall]

@whitewall

As well, not all headings seem to have the custom css added , but I can't figure out why. Here is the html for a header that doesn't have the custom css:

OK, I figured this one out, kind of. Even though it doesn't appear this way in my screenshots above, somehow a bunch of my lines start with a space. (this wasn't apparent because of the line wrapping issue)

What is odd is that Joplin seems to allow having a space in front of the # to create a title. So I don't know if your plugin should also allow it?

As far as the other issue of taking up two lines, that was indeed a problem in my css. Apologies for not testing that prior to posting. This was the css for header 1:

	color: #794BBB;
	font-weight:bold;
	background-color:#333333;
	display:block;
	 text-shadow: 1px 1px 4px #000000;
}

I added the display:block so that I can have the background for the header go all the way across the view frame. Like this:

EDIT:

Looking at the html, I now see that I formatted the snippet incorrectly. It should have been

<pre class=" CodeMirror-line " role="presentation">
  <span role="presentation" style="padding-right: 0.1px;">
    <span class="cm-header cm-header-1 cm-overlay cm-rm-header-token"># </span>
    <span class="cm-header cm-header-1">26 dec</span>
  </span>
</pre>

So it appears that there is no longer a single class that encompasses both the header token as well as the actual header. Is it possible to organize these classes so there is still a single class that covers the whole header? NBD if there isn't, but it may be helpful for others in the future.

[CalebJohn]

@whitewall

What is odd is that Joplin seems to allow having a space in front of the # to create a title. So I don't know if your plugin should also allow it?

The next update will allow it.

@whitewall

So it appears that there is no longer a single class that encompasses both the header token as well as the actual header. Is it possible to organize these classes so there is still a single class that covers the whole header? NBD if there isn't, but it may be helpful for others in the future.

There isn't a way merge the 2 elements unfortunately. You can still get the same behaviour through css.
Just add the below:

.cm-header.cm-header-1.cm-rm-header-token {
	display: inline;
	float: left;
}

I also noticed that you get a cool effect if you change float: left to float: right

The cursor is kinda weird, but not as weird as you'd think

[CWPfVTkNBMyfdFW]

Hey @CalebJohn,
I've been using the plugin for a few days now, here are some thoughts:

• It feels weird not having monospace for the code blocks.
• I really like the custom CSS to dim the # in front of headers. Having a similar (only the grey coloring, no resizing) behavior for the * used in italics and bold would be nice too, but I don't know if it would still be okay or considered "unholy WYSIAWYG" territory (or if it is possible at all).
• Somebody might be interested: I'm trying to get the url links colored, I have a mostly working CSS, but it doesn't work when links are list items and I'm not sure why (but I don't know CSS yet, so...):

.cm-rm-link {
    color: rgb(166,166,255);
}

• Kinda related with the previous point, I feel like the name part in a markdown link is as important (or even more when linking Joplin notes) than the path, like [My Note Title](:/24sef6s5e4fs6defse) but currently, the colored part is :/24sef6s5e4fs6defse. With the CSS snippet above, the [My Note Title] gets colored as a link. Same problem with list items, though.
• As user CSS customization can't use the variables from the theme, so i can't use var(--joplin-url-color) for the CSS. Could you consider adding link coloring to your plugin, so that switching theme would change links color?
• Last question, do I need the monospace font CSS if I already enabled the "All editor fonts" in the plugin options?

In any case, the plugin is fantastic, and not needing the viewer panel makes me feel like I have a much bigger screen.

[CalebJohn]

@CWPfVTkNBMyfdFW

It feels weird not having monospace for the code blocks.

Agreed, this will be one of the next things I work on. The CodeMirror parser makes it hard to do this, but I think I have a good workaround.

@CWPfVTkNBMyfdFW

I really like the custom CSS to dim the # in front of headers. Having a similar (only the grey coloring, no resizing) behavior for the * used in italics and bold would be nice too, but I don't know if it would still be okay or considered "unholy WYSIAWYG" territory (or if it is possible at all).

I should be able to add it no problem. I don't personally like when the the markup get's removed completely (as in Typora), so I won't add features at the plugin level. But I have no problem adding extra css classes to give users flexibility.

@CWPfVTkNBMyfdFW

• Somebody might be interested: I'm trying to get the url links colored, I have a mostly working CSS, but it doesn't work when links are list items and I'm not sure why (but I don't know CSS yet, so...):
• Kinda related with the previous point, I feel like the name part in a markdown link is as important (or even more when linking Joplin notes) than the path, like [My Note Title](:/24sef6s5e4fs6defse) but currently, the colored part is :/24sef6s5e4fs6defse . With the CSS snippet above, the [My Note Title] gets colored as a link. Same problem with list items, though.

I think this is the look you're going for? You can find the css below

.cm-s-default .cm-rm-link, .cm-s-default .cm-rm-image {
    color: rgb(88,88,180) !important;
}
.cm-s-material-darker .cm-rm-link, .cm-s-material-darker .cm-rm-image {
    color: rgb(166,166,255) !important;
}
.cm-rm-link.cm-string, .cm-rm-image.cm-string {
	opacity: 0.4;
}

@CWPfVTkNBMyfdFW

As user CSS customization can't use the variables from the theme, so i can't use var(--joplin-url-color) for the CSS. Could you consider adding link coloring to your plugin, so that switching theme would change links color?

The plugin doesn't have access to the colours either. Take a look at the above css, it uses the (CodeMirror) theme class to specify colours for each theme (I've just done Light and Dark there). I've included a mapping of Joplin themes to css classes so you don't have to do the digging yourself.

@CWPfVTkNBMyfdFW

Last question, do I need the monospace font CSS if I already enabled the "All editor fonts" in the plugin options?

No, that is an example of how you can customize the monospace font used.

@CWPfVTkNBMyfdFW

In any case, the plugin is fantastic, and not needing the viewer panel makes me feel like I have a much bigger screen.

Glad to hear it!

I'd like to include some fully configured css in the plugin repository for people that want a pre-configured experience. If/when you finish customizing your editor, please consider sharing the css!

[CWPfVTkNBMyfdFW]

@CalebJohn

Agreed, this will be one of the next things I work on. The CodeMirror parser makes it hard to do this, but I think I have a good workaround.

I'm looking forward to it.

@CalebJohn

I should be able to add it no problem. I don't personally like when the the markup get's removed completely (as in Typora), so I won't add features at the plugin level. But I have no problem adding extra css classes to give users flexibility.

I don't think I want to completely remove it either, but in my case, I prefer the text to be emphasized compared to all the formatting characters, it helps me when I glance over a note.

@CalebJohn

I think this is the look you're going for? You can find the css below

YES! Thanks a lot, I don't think I would have managed to get something as detailed as this.

@CalebJohn

The plugin doesn't have access to the colours either. Take a look at the above css, it uses the (CodeMirror) theme class to specify colours for each theme (I've just done Light and Dark there). I've included a mapping of Joplin themes to css classes so you don't have to do the digging yourself.

Oh, I was under the impression plugins could access it because another plugin (Note tabs) actually use these variables in the user settings. I'll take a look at the CodeMirror theme and your mapping, thanks for all your tips.

@CalebJohn

I'd like to include some fully configured css in the plugin repository for people that want a pre-configured experience. If/when you finish customizing your editor, please consider sharing the css!

I'll keep that in mind, for now it's just a few snippets taken here and there, but it's slowly taking form.

Thanks a lot for taking the time to answer all of my questions!

[ambrt]

@CalebJohn - kind of feature request (or i will do it ):
Embed content of linked note.

Basically if link is in the editor on its own line (following your way)
then it will show the notes body inline.

So are you up for this? If not i will create something.

[uxamanda]

Is it possible with CSS to change the style of checked vs unchecked lines? I took a look and I can't seem to see a differences in the classes, but maybe someone else has a suggestion.

[laurent]

@CalebJohn

Agreed, this will be one of the next things I work on. The CodeMirror parser makes it hard to do this, but I think I have a good workaround.

I wonder if we could make this the default in the Markdown editor? By default, the editor doesn't look very good with the monospace font, but if we could integrate your tweak we could have two modes:

• Custom font (like now, it would use whatever font the user has chosen)
• Smart (the default, which would be monospace for tables and codes, but regular font everywhere else).

We would also perhaps adjust the CSS so that it matches more closely the rendered view. What do you think?

[laurent]

In fact perhaps we could even make the plugin installed and enabled by default, with a set of good default settings? For example maybe not everyone wants to have images displayed directly in the editor, however the font tweak, link clicking, toggling checkboxes, etc. are all straightforward improvements that most Markdown users will want.