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

[inesucrvenom]

Operating system

macOS

Joplin version

Joplin 3.1.17 (prod, darwin)

Desktop version info

Joplin for Desktop

Copyright © 2016-2024 Laurent Cozic
Joplin 3.1.17 (prod, darwin)

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

[personalizedrefrigerator]

Be aware that it's possible to disable the new editor in v3.1.17 through settings > general > advanced.

[vaz-ar]

I have the same issue, the theme I used (https://github.com/gonzalovsilva/joplin-dark-theme) stopped working after updating to 3.1.20.
Reverting to the legacy markdown editor as @personalizedrefrigerator said is working.

[woodpexer]

i have the same issue (v3.1.20)
yes after enabling legacy editor, my custom css works as before.
but I would greatly appreciate it, if customizing css for markdown list were possible in the new editor, too.
Right now, there is no way for me to reference the lists in the following example:

<div class="cm-editor ͼ1 ͼ3 ͼ4 ͼ25 ͼ23 ͼ24 CodeMirror">
    <div tabindex="-1" class="cm-scroller">
        <div spellcheck="false" autocorrect="false" autocapitalize="sentence" translate="no" contenteditable="true"
             style="tab-size: 4;" class="cm-content cm-lineWrapping" role="textbox" aria-multiline="true"
             data-language="markdown">
            <div class="cm-line"><br></div>
            <div class="cm-line" dir="auto">normal-Text (should stay white) bullet lists colors should change depending on their indentation levels</div>
            <div class="cm-line" dir="auto"><span class="cm-rm-list-token"><span class="ͼ28 tok-meta">-</span><span
                    class="ͼ28"> </span></span><span class="ͼ28">1st level Bulletpoint (should be pink)</span></div>
            <div class="cm-line" dir="auto"><span class="cm-rm-list-token"><span class="ͼ28">	</span><span
                    class="ͼ28 ͼ28 tok-meta">-</span><span class="ͼ28 ͼ28"> </span></span><span class="ͼ28 ͼ28">2nd level Bulletpoint (should be orange)</span>
            </div>
            <div class="cm-line" dir="auto"><span class="cm-rm-list-token"><span class="ͼ28 ͼ28">		</span><span
                    class="ͼ28 ͼ28 ͼ28 tok-meta">-</span><span class="ͼ28 ͼ28 ͼ28"> </span></span><span
                    class="ͼ28 ͼ28 ͼ28">3.1st level Bulletpoint (should be green)</span></div>
            <div class="cm-line" dir="auto"><span class="cm-rm-list-token"><span
                    class="ͼ28 ͼ28 ͼ28">		</span><span class="ͼ28 ͼ28 ͼ28 tok-meta">-</span><span
                    class="ͼ28 ͼ28 ͼ28"> </span></span><span class="ͼ28 ͼ28 ͼ28">3.2nd level Bulletpoint (should be green too since same level of indentation)</span>
            </div>

those class names seem to be dynamically generated, in this example ͼ28, before it was ͼ1a, and before that ͼ44.

im not a CSS Pro (in fact never touched it outside of my custom css of joplin), so maybe it is possible to reference those dynamically generated classnames in my custom css and i just dont know how. If possible, could you provide an example, pretty please? :)

[vaz-ar]

I just upgraded to v3.2.11 and it looks like it does not work anymore, even with "Use legacy Markdown editor" enabled