Plugin: Rich Markdown

[uxamanda]

@CalebJohn

Would you mind if I added this to the repo?

Sure, see below for probably a better default.

@laurent

Perhaps we could set this CSS as default on the main app?

I still have on my list to do a deep dive into easy theming. My dream is to build (collaborate? ) on a plugin that allows a user to quickly choose colors like you can in Slack. It would also allow for basic changes like Condensed/Regular (less line height), Max Width of editor, Header size difference (make each header x times larger than the next, and let the user slide to change X) with some preset themes for what you generally work on "journaling", "code notes / math", "night mode" etc.

I still haven't looked into how the new color variables work in the app. I see references to things like "var(--joplin-font-family)", but I can't see where they are set. It seems like they are JS values not CSS values, so I don't think they can easily be changed by the user and would be better handled by a plugin. Is that the case or am I missing something?

To answer your question of default theme, I cleaned up my CSS above to make it less extreme (added some colors back). This might be a better default.

:root {
    --color-dark: #3e3e3e;
    --color-medium: #ccc;
    --color-light: #f1f1f1;
    --color-base: #fff;
    --color-actionable: dodgerblue; 
}

span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox + span.cm-rm-checkbox {
	/*adds a strike through on completed checkmarks*/
	text-decoration: line-through;
	opacity: 0.7;
}

  .CodeMirror-sizer {
  	/*keeps the text width manageable*/
  margin-right: auto !important;
  margin-left: auto !important;
  max-width: 80ch !important;
  line-height: 1.6em !important;
}

.cm-s-default .cm-hr {
	/*makes `---` like a musical staff, cause... Joplin :-) */
    border-top: 1px solid var(--color-medium);
    color: var(--color-medium) !important;
    display: block;
    line-height: 1px;
    width: 100%;
}


.cm-overlay, .cm-variable-2.cm-overlay, .cm-variable-3.cm-overlay, .cm-variable-4.cm-overlay, .cm-variable-5.cm-overlay, .cm-variable-6.cm-overlay{
	/*makes markdown-specific things fade back, i.e. _ and ** in bold and italic*/
		color: var(--color-medium) !important;
}


.cm-s-default .cm-header{
	/*changes header color*/
	color: var(--color-dark) !important;
}

 .cm-variable-2,.cm-variable-3,  .cm-variable-4, .cm-variable-5,.cm-variable-6{
	/*changes list color*/
	color: var(--color-dark) !important;
}
.cm-header.cm-rm-header-token{
	/*makes the markdown #, ##, ###, etc less noticable*/
	color: var(--color-medium) !important;
    font-size: 70%; 
    margin-left: -50px;
    max-width: 50px;
    width: 50px;
    overflow: hidden;
    display: inline-block;
    text-align: right;
    direction: rtl; 
}
.cm-header.cm-rm-header-token:before {
	/*this plus the `    direction: rtl;` in the header token are a hack to add space between the markdown ## and the header*/
	content: '--'  !important;
	color: transparent;
}

.cm-s-default .cm-comment {
	/*affects the code background*/
    background: var(--color-light);
}

.cm-jn-monospace {
	/*affects the code block background*/
    background: var(--color-light);
    letter-spacing: 0.1em;
}

.cm-rm-checkbox {
	/*changes the checkbox*/
    background: transparent;
    color: dodgerblue !important;
}


span.cm-rm-link, .cm-variable-2.cm-rm-link, .cm-variable-3.cm-rm-link, .cm-variable-4.cm-rm-link, .cm-variable-5.cm-rm-link, .cm-variable-6.cm-rm-link {
	/*changes links*/
    color: var(--color-actionable) !important;
}