# How to change CSS style for inline code block?

**URL:** <https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210>\
**Category:** Support\
**Created:** [22 September 2020 21:22 UTC](https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210 "2020-09-22T21:22:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bela53](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@bela53](https://discourse.joplinapp.org/u/bela53)\
**Post date:** [22 September 2020 21:22 UTC](https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210/1 "2020-09-22T21:22:52Z")

</div>

With dark theme, inline code-blocks in the Markdown editor view aren't displayed with sufficient contrast on black background (`color: #545454;`) , so the font gets a bit hard to read - maybe it's just me.

So I would like to raise its contrast to stand out from the background. What I did:

- Toggle development tools
- Pick the inline code block element (CTRL+SHIFT+C)
- Example: `<span class="cm-comment">test</span>`
- Appearance -\> Advanced Settings -\> Custom style-sheet for rendered markdown I try something like

```auto
.cm-comment {
  color: greenyellow; /*just an example; also tried with !important */
}

```

- restarted

However, the style does not take effect. Is there something I did wrong?

Kind regards  
bela

Joplin 1.1.4 (Ubuntu 20.04) Desktop

---

<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:** [22 September 2020 21:45 UTC](https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210/2 "2020-09-22T21:45:05Z")

</div>

`.cm-comment` should do it and it possibly needs the `!important` as well.

However when you say you restarted Joplin did you fully and properly quit Joplin ( **File** \> **Quit** ) or did you just press the top-right **X** (which just minimises it)?

---

<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:** [22 September 2020 22:12 UTC](https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210/3 "2020-09-22T22:12:11Z")

</div>

> [@bela53](#):
>
> Appearance -\> Advanced Settings -\> Custom style-sheet for rendered markdown

Spotted it.

Wrong css file. You need :

**Appearance -\> Advanced Settings -\> Custom stylesheet for Joplin-wide app styles**

---

<div class="post-metadata">

**Author:** ![bela53](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@bela53](https://discourse.joplinapp.org/u/bela53)\
**Post date:** [23 September 2020 06:40 UTC](https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210/4 "2020-09-23T06:40:03Z")

</div>

It worked, thank you very much!

`!important` is also needed, so my style now looks like:

```auto
.cm-s-material-darker .cm-comment {
  color: greenyellow !important;
}

```

I am wondering, why these styles belong to Joplin-wide app styles. Isn't this supposed to be a change of the rendered Markdown?

---

<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:** [23 September 2020 10:45 UTC](https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210/5 "2020-09-23T10:45:46Z")

</div>

> [@bela53](#):
>
> I am wondering, why these styles belong to Joplin-wide app styles. Isn't this supposed to be a change of the rendered Markdown?

You have been modifying the CSS to alter the editor where the Markdown is typed to create a note. This is "raw" Markdown, not "rendered" Markdown. A note's "raw" Markdown is "rendered" (converted into HMTL) and displayed in the viewer pane to the right of the editor (in split view).

So "rendered Markdown" means the note viewer pane. The CSS for this can be modified using **userstyle.css** which is the "Custom style-sheet for rendered markdown".

The rest of Joplin (Sidebar, notelist, toolbars and the **editor** itself) are considered the **Joplin App** , which together let you make and use those notes. How the app itself looks is nothing to do with Markdown but that look, or style, can be modified using **userchrome.css** which is the "Custom stylesheet for Joplin-wide app styles".

---

<div class="post-metadata">

**Author:** ![bela53](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@bela53](https://discourse.joplinapp.org/u/bela53)\
**Post date:** [23 September 2020 12:25 UTC](https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210/6 "2020-09-23T12:25:34Z")

</div>

Well explained, thanks!