Skip to content

Instantly share code, notes, and snippets.

@yairEO
Last active May 6, 2024 12:36
Show Gist options
  • Save yairEO/89d1d660812bf8f1c3036dbca7249f19 to your computer and use it in GitHub Desktop.
Save yairEO/89d1d660812bf8f1c3036dbca7249f19 to your computer and use it in GitHub Desktop.
storybook MDX - show code block of imported file
import { Meta, Description, Props, Source, Canvas } from '@storybook/addon-docs/blocks';
import Comp from './Comp';
import CompRaw from '!raw-loader!./Comp.jsx';
import readme from '!raw-loader!./readme.md';
<Meta
title="Comp/MDX"
component={Comp}
/>
<Description markdown={readme} />
<br/>
<Canvas>
<Story name="custom source" height="100px" parameters={{ docs: { source: { code: Comp } } }}>
<code>Comp.jsx</code>
</Story>
</Canvas>
@yairEO
Copy link
Author

yairEO commented Jun 8, 2021

Alternatively:

<details>
  <summary>The entrance point is <code>Comp.jsx</code></summary>
  <Source code={CompRaw} language='jsx' dark={true}/>
</details>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment