Plugin: Rich Markdown

Plugins
105

I had some fun with the CSS to get the Markdown styling even nicer to read.
I was tired of the multi-colors and in general was just looking to simplify the look. Really happy with how easy it was with the extra CSS classes!

simple look rich markdown
simple look rich markdown1464×918 58.4 KB

Here's the code:


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: 2.3ch !important;
}

.cm-hr {
	/*makes `---` solid*/
  border-top: 1px solid #cccccc;
  display: block;
  line-height: 0px;
}

.cm-s-default *{
	/*makes all text black*/
	color: black !important;
}
.cm-header.cm-rm-header-token{
	/*makes the markdown #, ##, ###, etc less noticable*/
	color: #cccccc !important;
    font-size: 90%; 
    margin-left: -50px;
    max-width: 50px;
    width: 50px;
    overflow: hidden;
    display: inline-block;
    text-align: right;
}

Not all of this is my invention, found lots of inspiration from previous posts, thanks!

(NOTE: requires turning on "Add additional CSS classes for enhanced customization" in the Settings).

9 Likes