mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 07:21:16 +08:00
57 lines
3.8 KiB
Markdown
57 lines
3.8 KiB
Markdown
---
|
|
title: 'Source'
|
|
---
|
|
|
|
Storybook's `Source` Doc Block displays the story's source code. It supports syntax highlighting for most languages (e.g., `javascript`, `jsx`, `json`, `yml`, `md`, `bash`, `css`, `html`) and can be copied with the click of a button.
|
|
|
|
|
|
|
|
## Working with the DocsPage
|
|
|
|
Storybook automatically generates a `Source` Doc Block within the [Canvas](./doc-block-canvas.md) to display the story's code snippet.
|
|
It includes additional customization via parameters. Below is a condensed example and tables featuring all the available options.
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
<CodeSnippets
|
|
paths={[
|
|
'common/component-story-custom-source.js.mdx',
|
|
]}
|
|
/>
|
|
|
|
<!-- prettier-ignore-end -->
|
|
|
|
<div class="aside">
|
|
|
|
💡 The pattern demonstrated here applies only to the story. If you need, you can it this to all the component stories, introducing a [component parameter](../writing-stories/parameters.md#component-parameters).
|
|
|
|
</div>
|
|
|
|
| Option | Description |
|
|
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| `code` | Customizes the code snippet to be displayed. <br/> `docs: { source: { code: '<h1>Hello world</h1>' } }`. <br/> Requires `language` for proper syntax highlighting. |
|
|
| `dark` | Sets the background to dark mode. <br/> `<Source dark/>` <br/> Applies only to `MDX`. |
|
|
| `id` | Supplies a unique story identifier. <br/> `<Source id="example-mycomponent--starter" />` <br/> Applies only to `MDX`. |
|
|
| `language` | Sets the language for syntax highlighting. <br/> `docs: { source: { language: 'html'} }` |
|
|
| `format` | Formats the code snippet. <br/> `docs: { source: { format:false } }` |
|
|
| `type` | Sets how the story source snippet is auto-generated. See table below for available values. |
|
|
|
|
| Value | Description | Support |
|
|
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
|
|
| **auto** (default) | Use `dynamic` snippets if the story is written using [Args](../writing-stories/args) and the framework supports it.<br/> `docs: { source: { type: 'auto' } }` | All |
|
|
| **dynamic** | Dynamically generated code snippet based on the output of the story function (e.g, JSX code for React). <br/> `docs: { source: { type: 'dynamic' } }` | [Limited](../api/frameworks-feature-support) |
|
|
| **code** | Use the raw story source as written in the story file. <br/> `docs: { source: { type: 'code' } }` | All |
|
|
|
|
## Working with MDX
|
|
|
|
If you need, you can also include the `Source` Doc Block in your MDX stories. It accepts either a story ID or a code snippet. For example:
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
<CodeSnippets
|
|
paths={[
|
|
'common/component-story-mdx-dedent.mdx.mdx',
|
|
]}
|
|
/>
|
|
|
|
<!-- prettier-ignore-end --> |