How to change CSS style for inline code block?

Support
1

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

2

.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)?

3

Spotted it.

Wrong css file. You need :

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

2 Likes
4

It worked, thank you very much!

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

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

5

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

1 Like
6

Well explained, thanks!