Prism display bug

[Altostratus]

When viewing code in markdown in DT, I see this:

If I enable Prism support in Preferences > Files > Markdown, I see this:

This happens if I use either:

• ```language-bash`
• ```bash.`
  Why the psychedelic color vibe?
  Thanks.

EDIT: How it looks in other editors, no funky stuff.

VS Code:

Typora:

[chrillek]

Is that the source or the preview? In the latter case, a look at the CSS might provide insights.

[BLUEFROG]

And are you using a default stylesheet that could have ocnflicting CSS declarations?

[Altostratus]

I am using a custom stylesheet for markdown. After removing some sections to see the effects in DT, the culprit seems to be this part of my CSS:

pre {
    border: 1px solid #324560;
    border-radius: .5rem;
    padding: .5rem .2rem;
    background-color: #292e38 !important;
    padding-left: 15px;
}

If I remove this line:

    background-color: #292e38 !important;

I get this (in DT):

But this is not what I want. Why is DT not setting the background color properly?

EDIT: this seems to happen only with Prism support enabled. As you can see in my original post, DT sets the background color properly if Prism is not enabled.

[BLUEFROG]

Prism has two parts: a JavaScript and a CSS file. Download and inspect the CSS file from the Prism site.

[Altostratus]

In case this helps someone, this can be solved by adding this to your custom CSS file:

code {
    text-shadow: none !important;
}

This is because <code> blocks are nested inside <pre> tags, and the code text shadow, on some renderers, clashes with a dark pre background color.