New
Storybook for full-stack developersAutomate with Chromatic
Star75,299
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@jfrk/storybook-addon-code
A storybook addon that display any type of code highlighted with Prismjs
npm install @jfrk/storybook-addon-code
Last updated about 3 years ago
0
Downloads per week
Readme View on GitHub

storybook-addon-code

React Storybook code addon

A Storybook addon enabling to show off code samples in the Storybook panel for your stories in Storybook.

Getting Started

npm i --save-dev storybook-addon-code

Usage

Create a file called addons.js in your storybook config.

Add following content to it:

import * as CodeAddon from '../src/register';
CodeAddon.setTabs(
    [{ label: 'Sass', type: 'sass' }, {label: 'TypeScript', type: 'typescript'}]
);

setTab function accept and object like {label: 'Sass', type:'sass'} or if you want to have multiple tabs you can pass an array with multiple objects. The label will pe displayed in the Storybook panel.

Then write your stories like this:

import { storiesOf } from '@storybook/react';
import withCode from 'storybook-addon-code';
import Button from './Button';

const styleFile = require('raw-loader!./style.scss');
const typescriptFile  = require('./test.tsx');

storiesOf('Button', module)
  .addDecorator(withCode(typescriptFile, 'typescript'))
  .addDecorator(withCode(styleFile, 'sass'))
  .add('with text', () =>
      <Button onClick={action('clicked')}>Hello Button</Button>
    )

Available list of format's for withCode function

  1. clike (withCode(YourCFile, 'clike'))
  2. css (withCode(YourCssFile, 'css'))
  3. html (withCode(YourHtmlFile, 'html'))
  4. js | javascript (withCode(YourJavascriptFile, 'js'))
  5. markup (withCode(YourMarkupFile, 'js'))
  6. mathml (withCode(YourMatHmlFile, 'mathml'))
  7. sass (withCode(YourSassFile, 'sass'))
  8. svg (withCode(YourSvgFile, 'svg'))
  9. ts (withCode(YourTsFile, 'ts'))
  10. typescript (withCode(YourTypescriptFile, 'typescript'))
  11. xml (withCode(YourXmlFile, 'xml'))

Have a look at this example stories to learn more about the withCode API

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI