Storybook: [addon-info] markdown in description

[livemirsi]

Hello.

storiesOf('atoms/buttons', module)
    .add('Button - custom', withInfo(`
    description or documentation about my component, supports markdown

    ~~~js
    <Button>Click Here</Button>
    ~~~

    `)(() => (
        <CustomButton
            onClickkkk={action('button-click')}
            disabled={boolean('disabled', false)}
            fullWidth={boolean('fullWidth', false)}
            innerAlignment={selectV2('innerAlignment', alignments, 'center')}
            variant={selectV2('variant', variants, 'primary')}
        >
            {text('Label', 'My button')}
        </CustomButton>
    )));

I see that the markup does not work
show screen
How to fix that?

• @storybook/react 3.4.2
• @storybook/addon-something 3.4.3

[Keraito]

As I'm already working on some Markdown-related stuff, I will try to look into it for you.

[Keraito]

@livemirsi after looking into your example, it seems that you're using tabs for indentation (in the markdown string). If you use spaces instead (should not be hard to convert them depending on your text editor), it will work. Can you see if that fixes it?

Tagging @Hypnosphi whether this is something storybook wants to cover on their side, or users should adhere to.

[livemirsi]

@Keraito thanks for the help. Yes, if i using spaces it is work. But, not have syntax highlighting.
see screenshot

[Keraito]

Hey @livemirsi, I looked into it a bit and couldn't quite solve it. Maybe I can find a fix later, but I don't expect that to be soon, sorry.

[wuweiweiwu]

Try with 4.0.0-alpha.4?

[giantrobotbee]

Just to add, I'm on 4.0.0-alpha.4 and am not seeing the syntax highlighting. Was also experiencing the issue where tabs would break the Markdown almost entirely.

[Keraito]

As far as I could see from playing around with the markdown stuff, is that the highlighting for the addon-info and addon-notes doesn't work, while it does work for example in the Story Souce. It seemed like storybook was using different ways of rendering the markdown between those 2. I'm not quite sure whether the highlighting worked before (cuz i havent been around for so long), maybe someone else from the org knows?

[wuweiweiwu]

Interesting. I'll take a look this weekend

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!