Homepage    |    GitHub    |    API    |    FAQ

Share your CSS

I've been playing around with some of the CSS myself trying to find what the various things relate to in the codemirror markdown editor. There was one that I noticed (I think in a post you made to emulate the new codemirror editor to look like ace) that I just can't find what it relates to which is .cm-property. I've been looking around trying to find what it references and just can't find it. Any idea what it does?

If anyone is interested the table I made for my own reference is below (absolutely not exhaustive):

Format CSS Element
Header{n} .cm-header-n
Italics/Emphasis .cm-em
Bold .cm-strong
BoldItalics .cm-strong.cm-em
Lists (Bullet/Number/Todo) .cm-variable-2, .cm-variable-3, .cm-keyword
Lists brackets .cm-meta
Links (text) .cm-link-text
Links (link) .cm-link, span-string.cm-url
Code .cm-comment
Horizontal line .cm-hr
Quote .cm-quote
Quote {n} .cm-quote.cm-quote-n
Strikethrough .cm-strikethrough
Unknown .cm.property
6 Likes

I did that ACE Editor css so quickly I did not comment it and I regret that now!

All I did was display the default "Welcome" note and then go through it, changing any elements I found to mimic the ACE Editor. I guess that .cm-property must be in there somewhere!

Well you will be pleased to know that the table above is based almost entirely on 1) the ACE editor CSS you posted and 2) the hint you gave to use the element picker tool.
All of which I used to create this abomination in an attempt to highlight the different elements:

/* Header 1-4 = red -> orange */
span.cm-header.cm-header-1 {
    color: #FF0000 !important;
    }
span.cm-header.cm-header-2 {
    color: #FF4700 !important
    }
span.cm-header.cm-header-3 {
    color: #FF7000 !important;
    }
span.cm-header.cm-header-4 {
    color: #FF9200 !important;
    }

/*Italics/emphasis = Green*/
span.cm-em {
    color: #1DAA14 !important;
    }

/*Bold = Violet*/
span.cm-strong {
    color: #a386ff !important;
    }

/*BoldItalics = Turquoise*/
span.cm-strong.cm-em{
    color: #40e0d0 !important;
    }

/*BP/NL/L 1 = Cyan (cm-meta controls brackets for L)*/
span.cm-variable-2, span.cm-meta {
    color: #008E89 !important;
    }
/*BP/NL/L 2 = Cyan*/
span.cm-variable-2 {
    color: #00BFB8 !important;
    }
/*BP/NL/L 3 = Cyan*/
span.cm-keyword {
    color: #00FDFF !important;
    }

/*URL = dark blue*/
span.cm-link, span.cm-string.cm-url {
    color: #000AFF !important;
    }

/*Link text = olive*/
span.cm-link-text {
    color: #7B965B !important
    }

/*code = yellow*/
span.cm-comment {
    color: #FFFE00 !important;
    }

/*horizontal line = brown*/
span.cm-hr {
    color: #604A24 !important;
    }

/*Quote 1-3 = light green shades*/
span.cm-quote.cm-quote-1 {
    color: #35bc00
    }
span.cm-quote.cm-quote-2 {
    color: #71d300
    }
span.cm-quote.cm-quote-3 {
    color: #7de900
    }

/*Stikethrough = grey*/
span.cm-strikethrough {
    color: #A1A1A1
    }
2 Likes

Thanks @dpoulton, switching the editor font and ditching the blue and green defaults in the CodeMirror editor greatly improves readability of my notes in markdown.

Now that I've been introduced to css, there are a number of things I'd like to change! Starting with the ridiculously large header sizes. :face_vomiting:

Edit: Changed! So much better to have same size headers.

1 Like

It's a ticked check-box!

cm-property

1 Like

Don't know if its been shared already (its a long thread)
but here's quick css.
It unifies color of headings of default theme in editor and in preview
blue headings

/* For styling the rendered Markdown */
h1,h2,h3,h4,h5,h6 {color:blue}
1 Like
3 Likes

Thanks, very nice collection.

Just wanted to update that this no longer works. Now the first class has to be div.sidebar

1 Like

is there a way to change the rendered bolt and italic font colors ?

I think you have to use strong and em(emphasis)

tools>options>appearance>show advanced>Custom stylesheet for rendered Markdown

Then add this

/*bold*/
strong {
	color:red;
}

/*italic*/
em {
	color:blue;
}

Correction: this is for markdown editor colors, not rendered colors, I misread, sorry :frowning:

For me this works, bold (orange), italics (yellow), strikethrough (teal?), using aritim dark theme otherwise:

span.cm-strong {
  Color: #FF9933 !important
}
span.cm-em {
    color: #FFFF33 !important
}
span.cm-strikethrough {
    Color: #99CCCC !important
}

If I understood correctly, it's important to put this !important at the end to ensure your custom CSS will take precedence?

1 Like

That's for styling the text in the markdown editor, correct? What I posted will style what I think we are calling the rendered markdown.

Uf, you're right, I completely didn't notice 'rendered' in original question.
I'll edit my response. Thanks

I thought 'rendered markdown' is the RIGHT SIDE ; what it looks like when you go PRINT TO PDF as well...

and the other stuff is on the LEFT SIDE ; where you do the actual input typing ; where it forces you to use MONOSPACE.

correct?

Yup, monospace font is for markdown editor.
And right side is preview, rendered markdown.

I like it really much, but the code blocks use the "sf pro display" font instead of a monospace font.

I fixed that by changing the asterisk to "body", then specify a monospace font to "pre" tag.

I don't think you have to use a mono space font. That's just the default. As well (and you may know this) left and right are changeable using the view>change application layout

Previously Joplin required a monospace font because the editor component couldn't handle proportional fonts. As of sometime last year, Joplin can now handle any font, but it's still recommend to use monospace if you use markdown tables or checklists etc.

1 Like

ok wicked thanks for the clarity guys .

one things I'm trying to figure out with this thread is how to highlight the different components of a notebook;

ie.
Notebook

Subnotebook

Subsubnotebook etc

have each of them a different background maybe ? anyone have a good way they have their set up . The Default is kind of muted.