New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,187
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@jls-digital/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](https://github.com/storybookjs/storybook/tree/main/code/ui/components/src/components/syntaxhighlight
npm install @jls-digital/storybook-addon-code
Last updated 14 days ago
143
Downloads per week
Readme View on GitHub

storybook-addon-code

NPM npm install size

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.

Screenshot of Addon

Installation

  1. npm install --save-dev @jls-digital/storybook-addon-code
  2. Add storybook-addon-code to your storybook's config
  3. 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.)

Q: When I add a new file to the list of source code, I get an error saying "The final argument passed to useMemo changed size between renders."

A: No worries, this is an issue with storybook's TabsState component. You can simply reload the page and it should work fine.

Q: Can I customize the order of my tabs?

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.

Join the community
6,521 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI