CSS for .cm-inlineCode when in a list element

jExplorer1 · 2024-10-29T15:25:20.987Z

Operating system

Linux

Joplin version

3.1.20

Desktop version info

Joplin 3.1.20 (prod, linux)

Client-ID: 6a17e1c064524fe79622fcdf7070a050
Sync-Version: 3
Profil-Version: 47
Unterstützter Schlüsselbund: Nein

Revision: 8199362

Backup: 1.4.2
Conflict Resolution: 1.2.3
History Panel: 1.0.2
Note overview: 1.7.1
Note Tabs: 1.4.0

Sync target

Nextcloud

Editor

Markdown Editor

What issue do you have?

With version 3.1.x my css in userchrome for inline code no more working.

I've changed it to the following to style inline code and list items.

.ͼ17 .cm-inlineCode {
	color: #7bbb61;
	border-width: 0;
}

/*------ Editor: list elements ------------------------*/
.ͼ1a {
	color: #c2a674;
}

It works as expected, except when inline code appears in a list item. Then the list item style override the inline code style.

I am happy if someone can help me to define the styles.

Thanx everyone working on Joplin!

dpoulton · 2024-10-29T16:00:34.634Z

@jExplorer1 welcome to the forum.

According to other posts on this and the CodeMirror forum you should not use any css classes beginning with ͼ.

Markdown Beta Editor - css class using obscure character Beta Testing

See Why does CM6 use the "ͼ" character in class names? - v6 - discuss.CodeMirror To summarize, ͼ marks an unstable auto-generated CodeMirror class. User CSS should target tok-link, cm-url, and other classes that do not start with ͼ.

jExplorer1 · 2024-10-29T20:49:27.153Z

Thanx for your explanation! I think I understand this in principle.

But I'm not so familiar with css. What can I do to adress the right css class in this snipped, for example to get rid of the border for inline code:

<span class="ͼ1a"> List item and </span>
<span class="cm-inlineCode" spellcheck="false" autocorrect="false"><span class="ͼ1a tok-meta">`</span><span class="ͼ1a">inline code</span><span class="ͼ1a tok-meta">`</span>

The correspodending Joplin (or CodeMirror?) style is:

.ͼ17 .cm-inlineCode {

    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, 0.5);
    border-radius: 4px;
    font-family: monospace;
}

Only, when I also take the class ͼ17 to the cm-inlineCode the border-width: 0; will work in my userchrome.css:

.ͼ17 .cm-inlineCode {
	color: #7bbb61;
	border-width: 0;
}

Thanx for advise.

dpoulton · 2024-10-30T03:23:10.223Z

I believe that you may just need to add !important to the setting to get rid of the border.

.cm-inlineCode {
	color: #7bbb61;
	border-width: 0px !important;
}

I have not found a way of applying formatting to lists.

personalizedrefriger · 2024-10-30T03:23:33.480Z

Changing the style of code blocks in list items

I originally posted a reply for how to style inline code that appears in a list item differently from inline code that is not in a list item (I misunderstood the question). I've included this description (minimized) below:

Applying different styles to inline code that only appears in a list item

Styling just inline code in list items

I've just opened a pull request that should make this possible without using internal CodeMirror CSS classes.

Until then, does the following work?

/* List items are 1) not headers and 2) have a <span class="tok-meta"></span> as a first child. */
.cm-line:not(.cm-header):has(:first-child.tok-meta) .cm-inlineCode {
  /* Inline code in list item styles here */
}

Edit: For hiding the inline code border, see @dpoulton's suggestion above.

Styling list items

/* List items are:
 1) not headers (:not(.cm-header))
 2) not table delimters (:not(.cm-tableDelimiter))
 3) and have a <span class="tok-meta"></span> as a first child. (:has(:first-child.tok-meta))

Note: This also applies to non-list paragraphs that start with bold or italic text.
*/
.cm-line:not(.cm-header):not(.cm-tableDelimiter):has(> :first-child.tok-meta) {
  /* List item styles here */
  color: #c2a674;
}

In the future, list item styling may be simplified by this pull request.

Edit summary: 1) Hid original solution 2) Linked to above answer for hiding inline-code border. 3) Added "styling list items" section. 4) Added note: CSS applies to non-list items.

jExplorer1 · 2024-10-30T09:04:03.898Z

The !important does the trick, thank you!

jExplorer1 · 2024-10-30T09:07:22.853Z

Hi, nice to see your work on this!

But in my test, all inline codes now are formatted red, whether in a list item or not

/* List items are 1) not headers and 2) have a <span class="tok-meta"></span> as a first child. */
.cm-line:not(.cm-header):has(:first-child.tok-meta) .cm-inlineCode {
  /* Inline code in list item styles here */
  	color: red;
}

Maybe, I've misunderstood something?

dpoulton · 2024-10-30T19:04:51.812Z

jExplorer1:

But in my test, all inline codes now are formatted red, whether in a list item or not

Isn't that what you wanted - for the inline code colour to be the same in the note body and in lists?

(From Original post 🡇)

jExplorer1:

... , except when inline code appears in a list item. Then the list item style override the inline code style.

jExplorer1 · 2024-10-30T20:00:49.192Z

dpoulton:

!important;

Ahhrg, sorry my fault. It's OK so!