GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 02:41:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add example for using Prettier to format source code snippets in documentation

Browse Source
This commit is contained in:
Valentin Palkovic 2025-03-31 11:53:55 +02:00
parent 18c95cc5cb
commit 85712bc368
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/api/doc-blocks/doc-block-source.mdx
View File

@ -133,6 +133,34 @@ Default: `parameters.docs.source.transform`
An async function to dynamically transform the source before being rendered, based on the original source and any story context necessary. The returned string is displayed as-is.
If both [`code`](#code) and `transform` are specified, `transform` will be ignored.
{/* prettier-ignore-start */}
```js
// .storybook/preview.js|ts|jsx|tsx
export default {
parameters: {
docs: {
source: {
transform: async (source) => {
const prettier = await import('prettier/standalone');
const prettierPluginBabel = await import('prettier/plugins/babel');
const prettierPluginEstree = await import('prettier/plugins/estree');
return prettier.format(source, {
parser: 'babel',
plugins: [prettierPluginBabel, prettierPluginEstree],
});
},
},
},
},
};
```
{/* prettier-ignore-end */}
This example shows how to use Prettier to format all source code snippets in your documentation. The transform function is applied globally through the preview configuration, ensuring consistent code formatting across all stories.
### `type`
Type: `'auto' | 'code' | 'dynamic'`