Storybook: इनलाइन कोड (बैकटिक `) के साथ जानकारी एडऑन मार्कडाउन टूटा हुआ है

को निर्मित 15 अग॰ 2017 · 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> , जिसे <code> अंदर <pre> रूप में कार्यान्वित किया जाता है, जो एक ब्लॉक तत्व है जो वाक्य को दो में विभाजित करता है।
<Code> this.props.code से टेक्स्ट प्रस्तुत करता है, लेकिन वास्तविक टेक्स्ट this.props.children ।

info bug

स्रोत

MrOrz

सबसे उपयोगी टिप्पणी

ऐसा लगता है कि code इनलाइन और ब्लॉक कोड अनुभागों दोनों के लिए उपयोग किया जाता है।
इनलाइन कोड के लिए इसे props.children प्रस्तुत करना चाहिए लेकिन कोड ब्लॉक के लिए props.code

UsulPro 20 अग॰ 2017

👍2

सभी 3 टिप्पणियाँ

@MrOrz मुझे इस मुद्दे का भी सामना करना पड़ा और इस पीआर #1501 में इसे ठीक करने जा रहा हूं

सहायता के लिए धन्यवाद!

UsulPro 15 अग॰ 2017

🎉1

यह सुनकर बहुत अच्छा लगा!

मैं इस मुद्दे को हल करने के लिए बस marksyConf को ओवरराइट कर सकता हूं, इसलिए पीआर पर कोई जल्दी नहीं है, अपना समय लें;)

उदा:


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 20 अग॰ 2017