Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Theming and addon-notes code block

See original GitHub issue

Greetings!

Describe the bug I use a custom theme for Storybook. barBg property changes background of blocks with code.

To Reproduce Steps to reproduce the behavior:

Create a .md file with code example inside.
Import it in any story.
Go to “Notes” section.
See error.

Expected behavior So, I expect barBg to change background of top bar only.

Screenshots Снимок экрана 2019-07-30 в 11 27 12

Code snippets

// file with custom theme settings
import { create } from '@storybook/theming';

export const theme = create({
  base: 'light', // base theme

  appBg: '#f4f5f9',
  barBg: '#3f4557',
  barTextColor: '#ffffff',
  barSelectedColor: '#ebb242',
});

System:

  System:
    OS: macOS 10.14.5
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.5.1 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm

Issue Analytics

State:
Created 4 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

shilmancommented, Sep 3, 2019

FYI addon-notes is being superceded by addon-docs. It’s reached release candidate (RC) status and will be properly released soon. Please give it a try! https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

1reaction

nbrylevvcommented, Jul 30, 2019

By the way, version I use are

"@storybook/addon-notes": "^5.1.9",
"@storybook/addons": "^5.1.9",
"@storybook/theming": "^5.1.9",
"@storybook/vue": "^5.1.9",

Top Results From Across the Web

CodeBlocks Dark Color Themes - YouTube

Make Sure CodeBlock is ClOSED before making any CHANGES2. ... Setting CodeBlocks Color Themes || CodeBlocks Dark Color Themes.

How to Use the WordPress Code Block - Elegant Themes

Enter the name of the block and select it when it appears or scroll through the blocks to see what's there. How to...

Code blocks - Material for MkDocs - GitHub Pages

Code blocks and examples are an essential part of technical project documentation. Material for MkDocs provides different ways to set up syntax highlighting...

Code Block Styles/Themes - Typora Support

Typora uses CodeMirror for syntax highlight in code fences. Code fences in Typora use cm-s-inner as their theme class.

Code blocks - Lotus Themes Help Center - Zendesk

We use the highlight.js library for the code formatting. This library lets you easily provide high-quality syntax highlighting without...