Storybook: 인라인 코드 (백틱`)가있는 정보 애드온 마크 다운이 손상됨

버전

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

입력 예

공식 예의이 항목

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] }
);

propTypes 는 백틱으로 묶여 있습니다.

예상 출력

propTypes 단어는 해당 단어가 속한 문장과 함께 고정 폭 글꼴로 표시됩니다.

전류 출력

propTypes 라는 단어는 아래와 같이 빈 <pre><code></code></pre> 요소가됩니다.

의심되는 원인

1. backtick의 기본 구성 요소는 <Code> 이며, <code> 내부에서 <pre> <code> 로 구현되며, 이는 문장을 둘로 나누는 블록 요소입니다.
2. <Code> 는 this.props.code 텍스트를 렌더링하지만 실제 텍스트는 this.props.children 있습니다.