Skip to content

Latest commit

 

History

History
241 lines (198 loc) · 7.22 KB

TIPS.md

File metadata and controls

241 lines (198 loc) · 7.22 KB

Tips

Note: Most of these have been wrapped up in to the themes (available in the plugin settings). So make sure to check there before spending too much time with custom css.

The below is a collection of userchrome.css customizations that might be handy. If you have one of your own that you'd like added here, please make a PR or let me know on the forum.

Horizontal Rule

/* Render horizontal lines (made with \-\-\- or \*\*\*) as an actual line across the editor. */
div.CodeMirror .cm-hr {
  border-top: 1px solid #777;
  display: block;
  line-height: 0px;
}

/* If using the Additional CSS option, then the below CSS can be used for a different effect */
div.CodeMirror pre.cm-rm-hr.CodeMirror-line  {
  border-top: 1px solid #777;
  line-height: 0px;
}

Subtle Headers

/* Reduce the size and visibility of the header hash tags. */
/* The additional CSS option must be enabled */
div.CodeMirror .cm-header.cm-rm-header-token {
	font-size: 0.9em;
	color: grey;
}
/* Additionally, this CSS unindent the "#" characters to align */
/* the header text with the rest of the text */
div.CodeMirror .cm-header.cm-rm-header-token {
	color: #cccccc;
	font-size: 0.9em;
	margin-left: -50px;
	max-width: 50px;
	width: 50px;
	overflow: hidden;
	display: inline-block;
	text-align: right;
	opacity: 0.5;
}

Thanks to uxamanda for the code.

Subtle Tokens

/* Reduces the intensity of the italics (emph) and bold (strong) markdown tokens */
div.CodeMirror .cm-em.cm-rm-em-token,
div.CodeMirror .cm-strong.cm-rm-strong-token {
	opacity: 0.5;
}

/* This is also available for highlight and strikethrough, but it doesn't look very good */
/*
.cm-rm-highlight.cm-rm-highlight-token,
.cm-strikethrough.cm-rm-strike-token,
*/

Quotes

/* Add a vertical bar to the left side of quote blocks so they match the viewer */
pre.cm-rm-blockquote.CodeMirror-line {
  border-left: 4px solid var(--joplin-code-border-color);
  opacity: 0.7;
}

pre.cm-rm-blockquote span.cm-quote + span.cm-quote {
  opacity: 1;
}

/* WARNING: the below code will hide the > from quotes, use at your own risk */
/*
pre.cm-rm-blockquote span.cm-quote.cm-rm-list-token {
  opacity: 0;
}
*/

Monospace Font

/* Changes the monospace font used for tabes/checkboxes */
/* All fonts option must be enabled */
div.CodeMirror .cm-overlay.cm-rm-monospace {
	font-family: monospace !important;
}

Strikeout Checkboxes

/* strikeout and dim the text of a checked checkbox */
div.CodeMirror span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox ~ span.cm-rm-checkbox {
	text-decoration: line-through;
	opacity: 0.7;
}
/* Uncomment the below sections to include the checkbox itself  */
/*
span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox {
	text-decoration: line-through;
	opacity: 0.7;
}
span.cm-rm-checkbox.cm-property {
	text-decoration: line-through;
	opacity: 0.7;
}
*/

Highlight the Active Line

/* Requires the "highlight background of current line option to be enabled */
div.CodeMirror .CodeMirror-activeline .CodeMirror-activeline-background.CodeMirror-linebackground {
  background: grey !important;
}

Coloured List Tokens

/* Disable list colours for the default (Light) theme */
div.CodeMirror .cm-s-default span.cm-variable-2, .cm-s-default span.cm-variable-3, .cm-s-default  span.cm-keyword {
	color: #32373F;
}

/* Add list colours back in for just the token component of the list */
div.CodeMirror .cm-overlay.cm-rm-list-token.cm-variable-2 {
	color: blue;
}
div.CodeMirror .cm-overlay.cm-rm-list-token.cm-variable-3 {
	color: orange;
}
div.CodeMirror .cm-overlay.cm-rm-list-token.cm-keyword {
	color: green;
}

/* If using the stylish theme, add the below to correct strikethrough colouration */
/* ref https://discourse.joplinapp.org/t/plugin-rich-markdown/15053/337? */
div.CodeMirror .cm-overlay + .cm-overlay.cm-rm-list-token.cm-variable-2 {
	color: inherit;
}
div.CodeMirror .cm-overlay + .cm-overlay.cm-rm-list-token.cm-variable-3 {
	color: inherit;
}
div.CodeMirror .cm-overlay + .cm-overlay.cm-rm-list-token.cm-keyword {
	color: inherit;
}

List Spacing

/* Match list spacing to the viewer */
div.CodeMirror .cm-overlay.cm-rm-list-token {
  line-height: 2em;
}

Code Blocks

Code block highlighting is implemented by the main Joplin app as of v2.3.4 and was removed from Rich Markdown versions 0.8.0 onwards.

Colour Schemes

Each Joplin theme uses a different CodeMirror colour scheme, it's useful to know what these colour schemes are because they can be used to support customizations that differ across Joplin themes (see Coloured List Tokens for an example).

Light: .cm-s-default
Dark: .cm-s-material-darker
Solarized Light: .cm-s-solarized
Solarized Dark: .cm-s-solarized and .cm-s-solarized.cm-s-dark
Dracula: .cm-s-dracula
Nord: .cm-s-nord
Aritim Dark: .cm-s-monokai
OLED Dark: .cm-s-material-darker

General

The Joplin forum has a collection of useful CSS snippets for customizations that aren't specific to this plugin.

Warning

The below configurations are not recommended and are provided for advanced users only.

Hide Tokens and URLs on Other Lines

/* Requires the additional Css and the highlight current line options to be enabled */
div.CodeMirror .cm-string.cm-url, .cm-header.cm-rm-header-token, .cm-em.cm-rm-em-token, .cm-strong.cm-rm-strong-token, .cm-rm-highlight.cm-rm-highlight-token, .cm-strikethrough.cm-rm-strike-token, .cm-rm-ins.cm-rm-ins-token, .cm-rm-sub.cm-rm-sub-token, .cm-rm-sup.cm-rm-sup-token {
	display: none;
}

div.CodeMirror .CodeMirror-activeline .cm-string.cm-url, .CodeMirror-activeline .cm-header.cm-rm-header-token, .CodeMirror-activeline .cm-em.cm-rm-em-token, .CodeMirror-activeline .cm-strong.cm-rm-strong-token, .CodeMirror-activeline .cm-rm-highlight.cm-rm-highlight-token, .CodeMirror-activeline .cm-strikethrough.cm-rm-strike-token, .CodeMirror-activeline .cm-rm-ins.cm-rm-ins-token, .CodeMirror-activeline .cm-rm-sub.cm-rm-sub-token, .CodeMirror-activeline .cm-rm-sup.cm-rm-sup-token {
	display: inherit;
}

/* Optional: You might also want to disable the highlight background */
.CodeMirror .CodeMirror-activeline
.CodeMirror-activeline-background:not(.cm-jn-code-block):not(.cm-jn-code-block-background),
.cm-s-solarized.cm-s-light div.CodeMirror-activeline-background,
.cm-s-solarized.cm-s-dark div.CodeMirror-activeline-background {
  background: inherit;
}

Focus Mode

Dims everything outside of the current line.

div.CodeMirror .CodeMirror-line {
  opacity: 0.4;
}

div.CodeMirror .CodeMirror-activeline .CodeMirror-line{
  opacity: 1.0;
}

Checkmark Checkboxes

Much thanks to ambrt for the initial implementation.

/* Requires the additional Css option to be enabled */
div.CodeMirror .cm-property.cm-rm-checkbox.cm-rm-checkbox-check {
  display: none;
}
div.CodeMirror .cm-property.cm-rm-checkbox.cm-rm-checkbox-check + .cm-property:before {
    content: "✓";
}