This storybook addon provides the ability to display a panel on stories with any code you want. It's mostly a wrapper for [storybook's syntax highlighter](https://github.com/storybookjs/storybook/tree/main/code/ui/components/src/components/syntaxhighlight
storybook-addon-code
This storybook addon provides the ability to display a panel on stories with any code you want. It's mostly a wrapper for storybook's syntax highlighter , which is a wrapper for prism.js.
Installation
npm install --save-dev @jls-digital/storybook-addon-code
- Add
storybook-addon-code
to your storybook's config - Add the
sourceCode
parameter to your stories
// .storybook/main.ts
const config: StorybookConfig = {
addons: ['@jls-digital/storybook-addon-code'],
};
Usage
In your story files, you can now import code as string (with vite by using the
'?raw' query parameter) and pass it to the sourceCode
parameter. You can even
import the file you're currently in:
// button.stories.ts
import rawStories from './button.stories?raw';
import rawComponent from './button?raw';
const meta: Meta<IButtonStory> = {
parameters: {
sourceCode: [
{ name: 'Component', code: rawComponent },
{ name: 'Stories', code: rawStories },
]
},
title: 'Components/Button',
}
Arguments
Name | Description | Values |
---|---|---|
name |
The name of the sub tab. Default: index of tab. | string |
code |
The code to display | string |
language |
The language of the code that should be used for syntax highlighting. Default: typescript . |
"jxextra", "jsx", "json", "yml", "md", "bash", "css", "html", "tsc", "typescript", "graphql" |
FAQ
(Click on a question to see the answer.)
A: No worries, this is an issue with storybook's TabsState component. You can simply reload the page and it should work fine.
A: Yes, the order is determined by the order of the array you pass to the
sourceCode
parameter.
Contributing
We encourage you to contribute to this project! Please check out the Contributing guide for guidelines about how to proceed and how to set up your dev environment. Join us!
License
Storybook-Addon-Code is released under the MIT License.