How to Change Code Block Background Color?

[jeffro]

Operating system

Windows

Joplin version

3.3.13

Desktop version info

Joplin 3.3.13 (prod, win32)

Device: win32, 13th Gen Intel(R) Core(TM) i7-13800H
Client ID: 756c6fdd606944568e94552736699771
Sync Version: 3
Profile Version: 47
Keychain Supported: Yes
Alternative instance ID: alt1

Revision: 144ed59

Backup: 1.4.3
Copy Code Blocks: 2.0.0
Freehand Drawing: 3.0.1
Insert Date: 1.0.1
Note list and sidebar toggle buttons: 1.0.3

Sync target

Nextcloud

Editor

Markdown Editor

What issue do you have?

I am able to change the background color of text lines in code blocks by adding the style definition to userstyle.css:

code,.inline-code {
background: #d6d3d1;
}

But how do I make the color of the code block itself darker? In the attached screenshot, I would like the darker grey behind the entire text stanza, not just behind the text itself.

Screenshots

[LeoW]

Not 100% sure if this will work but you can give it a try.

Joplin change code block color

[jeffro]

That doesn’t seem to be working for me.

I appreciate the reply, though!!

[ntczkjfg]

This works for me:

pre.hljs {
    background: #d6d3d1;
}

I’m seeing that this is similar to LeoW’s link that you said didn’t work for you, though. To get this I opened Joplin’s Help menu, then selected “Toggle development tools”. That opens a new pane. In the very top left of that new pane is this icon:

(you can also just press Ctrl+Shift+C once the dev tools are open)

When clicked, you can move your mouse over your code block until the entire thing is highlighted - and once it is, the little popup will tell you what element and class it is, for targeting in your CSS:

[jeffro]

That works!! Thank you!!!

[jeffro]

On a side note, the element inspector is brilliant. Until now, Joplin has just been a note-taking tool for me; it never occurred to me that it’s actually just an apparently Chromium-based browser. This dialogue changed how I will interact with the software; thank you for that, too!

[tomasz86]

@ntczkjfg

pre.hljs {
    background: #d6d3d1;
}

Please keep in mind this is a randomly generated class name, which means that it may change anytime with future Joplin update. If possible, it’s better to target elements with proper classes or using HTML tags.

Edit:

This particular class is OK. See below for explanation.

[ntczkjfg]

The hljs class stands for “HighlightJS”, the library Joplin uses for code syntax highlighting in the webview