Syntax highlighted code blocks render as gray on gray for unsupported languages in dark theme

[stof]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Create a markdown note for a story
2. Put a code block in it using a language for which highlighting is not loaded in storybook (I used ```twig when discovering the bug)
3. use the dark theme for your storybook
4. go to the notes panel to see these notes

Expected behavior
The code block is readable (as happens in light themes).

Screenshots

Code snippets

This component is not meant to be rendered manually, but using Pagerfanta:

```twig
<div class="text-center spacer-outer-top-tiny">
    {{ pagerfanta(members, 'material') }}
</div>
```

System:

• OS: Ubuntu 18.04
• Browser: firefox
• Framework: html (but irrelevant here)
• Addons: notes
• Version: 5.0.11

Additional context
Note that disabling syntax highlighting (by removing the language on the codeblock) makes the text readable (but we miss the copy option then).

[stof]

On a side note, I would be interested in getting an answer on #6144 as well (because this codeblock would be even better with proper highlighting.

[ndelangen]

I'll see what I can do

[shilman]

@ndelangen you might want to check out the changes @domyen made in the release/docs-technical-preview branch. We have nice syntax highlighting for the Source block in both light & dark modes.

[ndelangen]

@stof Would you like to review my PR?

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-rc.0 containing PR #6814 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[ChazUK]

@shilman I know this is a long closed ticket, but I'm trying to pass language="scss" to the <Source /> block in @storybook/addon-docs with version 6.3.0 and I'm still getting an unhighlighted grey block. Is there something I am missing to add support for more languages?

[ChazUK]

Ignore me! Found it here https://storybook.js.org/docs/react/writing-docs/mdx#syntax-highlighting