Incompatibility of Custom CSS with New CodeMirror Structure: Problems with Headings, Lists, and Blockquotes

Operating system

macOS

Joplin version

Joplin 3.1.17 (prod, darwin)

Desktop version info

Joplin for Desktop

Client ID: 26465f57d1dc4945851fb7962add94f3 Sync Version: 3 Profile Version: 47 Keychain Supported: Yes

Revision: 3ea403d

Auto show active note in sidebar: 1.0.1 Backup: 1.4.2 Favorites: 1.3.2 Note Tabs: 1.4.0 Outline: 1.5.13 Rich Markdown: 0.15.0 Search & Replace: 2.2.0

Current behaviour

I understand that supporting custom styling through userchrome.css isn't officially supported, but I've encountered issues that may have broader implications regarding headings, lists, and blockquotes.

I'm using a Markdown editor directly and applying colors through userchrome.css

in version 3.0.15

My lists used three colors (and they repeat in cycles):

span.cm-variable-2 { color: #bcffa3 !important; opacity: 1.0 !important }
span.cm-variable-3 { color: #8eb0fe !important; opacity: 1.0 !important }
span.cm-keyword { color: #ffd582 !important; opacity: 1.0 !important }

For quotes (after 6th level, all are the same):

span.cm-quote-1,
span.cm-quote-4,
span.cm-quote
    { color: #bd99ff !important; opacity: 1.0 !important }
span.cm-quote-2,
span.cm-quote-5
    { color: #979bff !important; opacity: 1.0 !important }
span.cm-quote-3,
span.cm-quote-6
    { color: #91ccfd !important; opacity: 1.0 !important }

For headers:

.cm-header.cm-rm-header-token { opacity: 0.5 !important}
span.cm-header-1 { color: #0FFF1F !important; font-weight: 900 !important; opacity: 1.0 !important }
span.cm-header-2 { color: #ff28b0 !important; font-weight: 900 !important; opacity: 1.0 !important }
span.cm-header-3 { color: #00f5e4 !important; font-weight: 600 !important; opacity: 1.0 !important }
span.cm-header-4 { color: #a742ff !important; font-weight: 600 !important; opacity: 0.9 !important }
span.cm-header-5 { color: #33ffad !important; font-weight: 600 !important; opacity: 0.9 !important }
span.cm-header-6 { color: #52aeff !important; font-weight: 600 !important; opacity: 0.9 !important }

in version 3.1.17

In this pre-release lists use multiples of ͼ1a to define sublist entries, and my styling attempts didn't succeeded.

Blockquotes have no additional classes for levels; the > token is in a separate span, so I think it can't be done anymore?

My attempt for headers:

/* token = # thing before headings */
span.tok-heading.tok-meta { opacity: 0.5 !important}
span.cm-h1 { color: #0FFF1F !important; font-weight: 900 !important; opacity: 1.0 !important }
span.cm-h2 { color: #ff28b0 !important; font-weight: 900 !important; opacity: 1.0 !important }
span.cm-h3 { color: #00f5e4 !important; font-weight: 600 !important; opacity: 1.0 !important }
span.cm-h4 { color: #a742ff !important; font-weight: 600 !important; opacity: 0.9 !important }
span.cm-h5 { color: #33ffad !important; font-weight: 600 !important; opacity: 0.9 !important }
span.cm-h6 { color: #52aeff !important; font-weight: 600 !important; opacity: 0.9 !important }

For lists


/* list levels*/
span.ͼ1a:not(.ͼ1a.ͼ1a) { color: #ffd582 !important; opacity: 1.0 !important }
span.ͼ1a.ͼ1a:not(.ͼ1a.ͼ1a.ͼ1a) { color: #8eb0fe !important; opacity: 1.0 !important }
span.ͼ1a.ͼ1a.ͼ1a { color: #bcffa3 !important; opacity: 1.0 !important }

None of these styles are working as expected. I initially had rich-markdown additional classes, but after toggling them and rewriting my CSS, I still can't achieve the desired results. The only thing that worked was dimming the token.

Conclusion

I’m reverting to the last stable version (3.0.15) because I rely heavily on these colors, and they function correctly there. The reason for trying the pre-release (3.1.17) was the new feature (from 3.1.16) to move notebooks without dragging, which is fantastic, but the updated CodeMirror (in the same 3.1.16) seems to have changed class names and structure significantly.

Please let me know if you need more information or which screenshots I can provide for clarity. I'm willing to reinstall the pre-release for further testing.

It's possible there are more classes impacted that they couldn't be tweaked anymore, I just gave up after trying with these three.

in pre-release version 3.1.17

Btw, these three work in pre-release in this form just fine, except that highlight lost token.

/* **x** */
span.tok-strong.tok-meta { color: #353d6e !important}
span.tok-strong { color: #ff0040 !important; opacity: 1.0 !important }

/* *x* */
span.tok-emphasis.tok-meta { color: #353d6e !important }
span.tok-emphasis { color: #ffe100 !important; opacity: 1.0 !important }

/* ==x== */
span.cm-rm-highlight { background: #0B7447 !important; color: #eeeeee !important; opacity: 1.0 !important }

Expected behaviour

For headers to actually apply color changes (they only dimmed token). And not to lose information where are sublists / subquotes.

Logs

No response

laurent22 / joplin