Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/whitespace-se/storybook-addon-html
A Storybook addon that extracts and displays compiled syntax-highlighted HTML
https://github.com/whitespace-se/storybook-addon-html
html storybook
Last synced: about 1 month ago
JSON representation
A Storybook addon that extracts and displays compiled syntax-highlighted HTML
- Host: GitHub
- URL: https://github.com/whitespace-se/storybook-addon-html
- Owner: whitespace-se
- License: other
- Created: 2019-12-02T15:24:14.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T10:00:45.000Z (about 2 months ago)
- Last Synced: 2024-10-05T03:05:55.236Z (about 1 month ago)
- Topics: html, storybook
- Language: TypeScript
- Homepage:
- Size: 3.42 MB
- Stars: 95
- Watchers: 13
- Forks: 43
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon HTML
This addon for Storybook adds a tab that displays the compiled HTML for each
story. It uses [highlight.js](https://highlightjs.org/) for syntax highlighting.
## Requirements
Version 6 of this addon requires Storybook 8 and Prettier 3. If you are still
using Storybook 7, you can use version 5.
## Getting Started
Install the addon and its dependencies.
With NPM:
```sh
npm i --save-dev @whitespace/storybook-addon-html prettier react-syntax-highlighter
```
With Yarn:
```sh
yarn add -D @whitespace/storybook-addon-html prettier react-syntax-highlighter
```
### Register addon
```js
// .storybook/main.js
module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-html",
// ...
],
};
```
## Usage
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](https://prettier.io/docs/en/options.html) in the
`html` parameter:
```js
// .storybook/preview.js
export const parameters = {
// ...
html: {
prettier: {
tabWidth: 4,
useTabs: false,
htmlWhitespaceSensitivity: "strict",
},
},
};
```
You can override the wrapper element selector used to grab the component HTML.
```js
export const parameters = {
html: {
root: "#my-custom-wrapper", // default: #root
},
};
```
Some frameworks put comments inside the HTML. If you want to remove these you
can use the `removeComments` parameter. Set it to `true` to remove all comments
or set it to a regular expression that matches the content of the comments you
want to remove.
```js
export const parameters = {
html: {
removeComments: /^\s*remove me\s*$/, // default: false
},
};
```
You can also use the `removeEmptyComments` parameter to remove only empty
comments like `` and ``.
```js
export const parameters = {
html: {
removeEmptyComments: true, // default: false
},
};
```
You can override the `showLineNumbers` and `wrapLines` settings for the syntax
highlighter by using the `highlighter` parameter:
```js
export const parameters = {
html: {
highlighter: {
showLineNumbers: true, // default: false
wrapLines: false, // default: true
},
},
};
```
Another way of hiding unwanted code is to define the `transform` option. It
allows you to perform any change to the output code, e.g. removing attributes
injected by frameworks.
```js
html: {
transform: (code) => {
// Remove attributes `_nghost` and `ng-reflect` injected by Angular:
return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, "");
};
}
```
You can disable the HTML panel by setting the `disable` parameter to true.
This will hide and disable the HTML addon in your stories.
```js
html: {
disable: true, // default: false
}
```