Joplin 2.7: Bold text not green anymore

Features
1

After I updated Joplin to Version 2.7.13, I noticed that bold formating does not appear green anymore. Is this an intended change? (If so, it is a pity: I like(d) the color emphases additionally to the bold formating. The difference between bold and normal text is not very pronounced.)
Cheers, Peter

Joplin 2.7.13 (prod, darwin)

Client ID: fa6b88d838eb4576bce5ac60876fe473
Sync Version: 3
Profile Version: 41
Keychain Supported: Yes

Revision: 5b5165d

2

There was an update quite a long time ago now to remove the default codemirror syntax highlighting to make the styling more consistent.
You can add styling back using css.

Default light theme:

Default dark theme:

4 Likes
3

Thank you for the tip with the CSS tweak! I will have a look into it.

1 Like
4

@petzi53

If you want text marked as **bold** in the markdown editor to be green just put this in your userchrome.css file.

 .cm-strong {
    /* bold text */
     color: green !important;
}

If you want to change some of the other formatting, below is an example with a few of the css elements required. Hopefully the comments will show what is being changed. Most of the colours used are "named colours" and a list of them can be found here. Just change the colour names to suit your needs.

Remember, the userchrome.css file is used to change the default values. If there is a change you do not want you only have to delete that line or entire section to get the default settings back.

Finally, whenever you modify the css file you must fully quit (File > Quit) and restart Joplin for the changes to take effect.

/* ==CodeMirror editor modifications== */

 span[role="presentation"] {
    /* editor text */
     color: black;
}
 .cm-header {
    /* This covers ALL headers */
     color: blue !important;
}
 .cm-variable-2, .cm-meta {
    /* lists (.cm-meta controls the square brackets [ ] ) - may need extra elements added if the list goes down levels*/
     color: darkred !important;
}
 .cm-strong {
    /* bold text */
     color: green !important;
}
 .cm-comment {
    /* code text - code blocks & inline code*/
     border: none !important;
     background-color: #F3F3F3 !important;
     font-weight: 500;
}
 .cm-quote {
    /* quoted text */
     color: darkviolet !important;
     opacity: 1 !important;
}
 .cm-image-marker {
    /* the "!" before displayed image links */
     color: red;
     font-weight: 900;
}
 .cm-link-text {
    /* links - .cm-link-text is everything in the square brackets of a link*/
     font-weight: bold;
     color: blue !important;
     text-decoration: none !important;
}
 .cm-string.cm-url, .cm-link {
    /* links - .cm-string.cm-url is the url itself in the round brackets of a link - .cm-link is a link created just using angled brackets - "<http://example.com>" */
     color: blue !important;
     text-decoration: none !important;
     opacity: 1 !important;
}
 .cm-tag, .cm-attribute {
    /* HTML tags - .cm-tag is the HTML tag itself such as "<img>" | .cm-attribute is any tag attributes such as "width" or "src" */
     color: blueviolet !important;
     font-weight: 500;
    /* the above are NOT applied if the html text is marked as "code" */
}
 .cm-hr {
    /* horizontal rule - "***" */
     color: darkorange !important;
     font-weight: 900;
}
1 Like
7

from tools click options then from appearance click show advanced settings
if you add this

strong {
color: #50fa7b;
 }

to the custom stylesheet for rendered Markdown

and adding this

.cm-strong {
    /* bold text */
     color: #50fa7b !important;
}

to the custom stylesheet for Joplin-wide app styles
will bring back the same bold text color

8

Thank you @karim ! It worked! I wouldn't have known where to look and what to change.