Markdown preview - customising code blocks

support
#1

Hi,

I want to customise the way code blocks look in markdown preview. What CSS selector do I need to use for that?

Here is a sample document:

foo `bar` baz

```
foo bar
```

Using the following CSS snippets I can modify the inline code but didn’t find the way to change the code block:

.markdown-preview.markdown-preview code {
   color: white;
   background-color: black;
}

.markdown-preview.markdown-preview pre {
   color: white;
   background-color: black;
}

What’s the trick?

#2

Try some descriptor such as sh or even mermaid notation

```sh
foo bar
```
#3

Thanks, but it didn’t help.

#4

I actually don’t know if the code block is created with the pre tag. Unfortunately saving to HTML seems broken in the markdown-preview plugin so I don’t know what the source HTML looks like. I assumed it uses that tag (and also tried with a bunch of others but no joy).

#5

Ok, I got there with the developer tools and it looks like atom-text-editor tag is what I need.