Storybook: Info addon markdown with inline code (backtick `) is broken

[MrOrz]

Versions

• @storybook/react v3.2.4
• @storybook/addon-info v3.2.4

Example input

This entry in the official example

storiesOf('Button').addWithInfo(
  'simple usage (custom propTables)',
  `
      This is the basic usage with the button with providing a label to show the text.
      Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
      So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
      ~~~js
      storiesOf('Button')
        .addWithInfo(
          'simple usage (custom propTables)',
          <info>,
          <storyFn>,
          { inline: true, propTables: [Button]}
        );
      ~~~
    `,
  () => (
    <div>
      <Button label="The Button" onClick={action('onClick')} />
      <br />
    </div>
  ),
  { inline: true, propTables: [Button] }
);

Notice the propTypes is enclosed in backticks.

Expected output

The word propTypes is shown in monospaced font, alongside with the sentence it belongs to.

Current output

The word propTypes becomes an empty <pre><code></code></pre> element, as shown below.

Suspected cause

1. The default component for backtick is <Code>, which is implemented as <code> inside <pre>, which is a block element that breaks the sentence into two.
2. <Code> renders text from this.props.code, but the actual text is in this.props.children.

[UsulPro]

@MrOrz I faced this issue as well and going to fix it in this PR #1501

Thanks for the help!

[MrOrz]

It's great hearing that!

I can just overwrite marksyConf to workaround this issue, so no hurries on the PR, take your time ;)

ex:

import React from 'react';
import { configure } from '@storybook/react';
import { setDefaults } from '@storybook/addon-info';

function Code({ children }) {
  return <code>{children}</code>;
}

function loadStories() {/* loading stories here */}

setDefaults({ marksyConf: { code: Code } });
configure(loadStories, module);

[UsulPro]

Looks like code used for both inline and block code sections.
For inline code it should render props.children but for code block props.code