Storybook Addon HTML DOCUMENT
A Storybook addon that extracts and displays compiled syntax-highlighted HTML, and can load html documents. It uses highlight.js for syntax highlighting.
Source of ideas
Expand @whitespace-se/storybook-addon-html
Getting Started
npm i --save-dev storybook-addon-html-document
Register addon
Create a file called main.js
inside the .storybook
directory and add the
following content:
// .storybook/main.jsmoduleexports = addons: 'storybook-addon-html-document'
Usage
Add withHTMLDOC
as a global decorator inside .storybook/preview.js
:
// .storybook/preview.js// if you use @storybook/html.//import { addDecorator } from '@storybook/html';//import { withHTMLDOC } from 'storybook-addon-html-document/html';;; ;
The HTML is formatted with Prettier. You can override the Prettier config
(except parser
and plugins
) by providing an object following the
Prettier API override format:
// .storybook/preview.js// if you use @storybook/html.//import { addDecorator } from '@storybook/html';//import { withHTMLDOC } from 'storybook-addon-html-document/html';;; ;
Matters need attention
- Html-loader need to be included in your webpack configuration.
- When the resource needs included in your html docments code are babel excluded, Or you can create a directory that is not hit by babel.
//Suggest moving to move stories native html resources outside the project.baseConfigmodulerules//Setup file-loader Ensure that html native resources are properly loadedbaseConfigmodulerules
Supported frameworks
When importing the decorator, use the correct path for your framework, e.g. storybook-addon-html-document/react
for React or storybook-addon-html-document/html
for HTML.
Right now, the addon can be used with these frameworks:
- HTML
- React