Plugin: Rich Markdown

Plugins
375

Wanted to share some RM CSS tricks. Each one is made up of two parts:

  1. JSON to be pasted into the settings at Rich Markdown --> Advanced Settings --> Custom classes JSON. This creates new CSS classes out of text patterns.
  2. CSS to be pasted into Joplin's userchrome.css (AKA Appearance --> Custom stylesheet for Joplin-wide app styles).

Highlight tags in the editor

Preview:

image
image1072×116 18.6 KB

  1. JSON:
[{ "name": "rm-tag", "regex": "(?<=^|\\s)([#@+]|\\/\\/)([^\\s#@+]*\\w)" }]
  1. CSS:
div.CodeMirror span.cm-rm-tag {
    background-color: #7698b3;
    color: white !important;
    padding: 0em 2px;
    border-radius: 5px;
    display: inline;
}

Colour-coded checkboxes in the editor

Preview:
image

These [x]it!-inspired checkbox styles represent various possible states of tasks. (See also this plugin, which renders these checkboxes in a panel.)

  1. JSON:
[{
	"name": "rm-xitOpen",
	"regex": "(?<=^\\s*)[-+*] \\[ \\](?=\\s.*)"
},
{
	"name": "rm-xitDone",
	"regex": "(?<=^\\s*)[-+*] \\[x\\](?=\\s.*)"
},
{
	"name": "rm-xitOngoing",
	"regex": "(?<=^\\s*)[-+*] \\[@\\](?=\\s.*)"
},
{
	"name": "rm-xitObsolete",
	"regex": "(?<=^\\s*)[-+*] \\[~\\](?=\\s.*)"
},
{
	"name": "rm-xitInQuestion",
	"regex": "(?<=^\\s*)[-+*] \\[\\?\\](?=\\s.*)"
},
{
	"name": "rm-xitBlocked",
	"regex": "(?<=^\\s*)[-+*] \\[!\\](?=\\s.*)"
}]
  1. CSS:

I included an extra commented line in each class for optionally highlighting the checkbox.

div.CodeMirror .cm-rm-xitOpen { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #4178be !important;
    font-weight: bold !important;
    /* background-color: #a3c3f5 !important; */
}

div.CodeMirror .cm-rm-xitDone { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #64a073 !important;
    font-weight: bold !important;
    /* background-color: #b9d7bf !important; */
}

div.CodeMirror .cm-rm-xitOngoing { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #cb55c2 !important;
    font-weight: bold !important;
    /* background-color: #ebace8 !important; */
}

div.CodeMirror .cm-rm-xitObsolete { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #999999 !important;
    font-weight: bold !important;
    /* background-color: #c4c4c4 !important; */
}

div.CodeMirror .cm-rm-xitInQuestion { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #cc913f !important;
    font-weight: bold !important;
    /* background-color: #e9c79f !important; */
}

div.CodeMirror .cm-rm-xitBlocked { /* Add * after the class for CM6 */
    font-family: monospace !important;
    color: #e22d2d !important;
    font-weight: bold !important;
    /* background-color: #f5aaaa !important; */
}
10 Likes