# CSS for .cm-inlineCode when in a list element

**URL:** <https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640>\
**Category:** Support\
**Created:** [29 October 2024 15:25 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640 "2024-10-29T15:25:20Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jExplorer1](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/jexplorer1/32/23140_2.png) [@jExplorer1](https://discourse.joplinapp.org/u/jExplorer1)\
**Post date:** [29 October 2024 15:25 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/1 "2024-10-29T15:25:20Z")

</div>

### 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.

```auto
.ͼ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!

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [29 October 2024 16:00 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/2 "2024-10-29T16:00:34Z")

</div>

@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](https://discourse.joplinapp.org/t/markdown-beta-editor-css-class-using-obscure-character/39575/2):
>
> See [Why does CM6 use the "ͼ" character in class names? - v6 - discuss.CodeMirror](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821) 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 ͼ.

---

<div class="post-metadata">

**Author:** ![jExplorer1](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/jexplorer1/32/23140_2.png) [@jExplorer1](https://discourse.joplinapp.org/u/jExplorer1)\
**Post date:** [29 October 2024 20:49 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/3 "2024-10-29T20:49:27Z")

</div>

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:

```auto
<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:

```auto
.ͼ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:

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

```

Thanx for advise.

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [30 October 2024 03:23 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/4 "2024-10-30T03:23:10Z")

</div>

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

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

```

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

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [30 October 2024 03:23 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/5 "2024-10-30T03:23:33Z")

</div>

## 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](https://github.com/laurent22/joplin/pull/11291) that should make this possible without using internal CodeMirror CSS classes.
> 
> Until then, does the following work?
> 
> ```auto
> /* 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

```css
/* 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](https://github.com/laurent22/joplin/pull/11291).

**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.

---

<div class="post-metadata">

**Author:** ![jExplorer1](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/jexplorer1/32/23140_2.png) [@jExplorer1](https://discourse.joplinapp.org/u/jExplorer1)\
**Post date:** [30 October 2024 09:04 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/6 "2024-10-30T09:04:03Z")

</div>

The `!important` does the trick, thank you!

---

<div class="post-metadata">

**Author:** ![jExplorer1](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/jexplorer1/32/23140_2.png) [@jExplorer1](https://discourse.joplinapp.org/u/jExplorer1)\
**Post date:** [30 October 2024 09:07 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/7 "2024-10-30T09:07:22Z")

</div>

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

```auto
/* 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?

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [30 October 2024 19:04 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/8 "2024-10-30T19:04:51Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![jExplorer1](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/jexplorer1/32/23140_2.png) [@jExplorer1](https://discourse.joplinapp.org/u/jExplorer1)\
**Post date:** [30 October 2024 20:00 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/9 "2024-10-30T20:00:49Z")

</div>

> [@dpoulton](#):
>
> `!important;`

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [29 November 2024 20:01 UTC](https://discourse.joplinapp.org/t/css-for-cm-inlinecode-when-in-a-list-element/41640/10 "2024-11-29T20:01:10Z")

</div>

Closed on 29 November 2024 20:01 UTC

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