Editor color highlighting

There used to be color highlighting for titles and bullet points in the editor.
Now all the text is black and horrible to look at. I dont want to look at "rendered" markdown. I want to edit the normal file with highlighting.
How do I make it go back to how it was before?

Why did you get rid of the colors????

How do I get the color highlighting back like seen on the editor tab in this post?

Proposal to change it was here:

Release notes:

CSS wiki:

How to customise Joplin:


@awefaerg welcome to the forum.

Here is a starter for you to put into your userchrome.css file.

It's commented so hopefully you should see what each bit changes. You can change the colours to suit your needs. I have mainly used named colours rather than hex codes. All the available named colours can be found here.

Some elements remove things like text decoration (url underlines etc.) . If you dont want that just delete it.

Remember you must completely restart Joplin for the changes to take effect. You must quit Joplin not just close the window to the system tray.

/* ==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-comment {
    /* code text - code blocks & inline code*/
     border: none !important;
     background-color: #F3F3F3 !important;
     font-weight: 500;
 .cm-quote {
    /* quoted text */
     color: darkviolet !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;
 .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;

I love you guys. Thanks

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.