Storybook: インラインコード (バッククォート `) を含む Info アドオンマークダウンが壊れている

作成日 2017年08月15日 · 3コメント · ソース: storybookjs/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>要素になります。

Screenshot

疑わしい原因

バッククォートのデフォルトのコンポーネントは<Code> 、これは<pre>内に<code>として実装されます。これは、文を 2 つに分割するブロック要素です。
<Code>はthis.props.codeからのテキストをレンダリングしますが、実際のテキストはthis.props.childrenます。

info bug

ソース

MrOrz

最も参考になるコメント

インラインコードセクションとブロックコードセクションの両方にcode使用されているように見えます。
インラインコードの場合はprops.childrenをレンダリングする必要がありますが、コードブロックの場合はprops.code

UsulPro 2017年08月20日

👍2

全てのコメント3件

@MrOrz私もこの問題に直面しており、この PR #1501 で修正する予定です。

助けてくれてありがとう！

UsulPro 2017年08月15日

🎉1

それを聞くのは素晴らしいことです！

marksyConfを上書きしてこの問題を回避できるので、PR を急ぐ必要はありません。時間をかけてください ;)

例:


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

MrOrz 2017年08月20日

UsulPro 2017年08月20日

👍2

このページは役に立ちましたか？

0 / 5 - 0 評価

Storybook: インライン コード (バッククォート `) を含む Info アドオン マークダウンが壊れている