
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@xfinx/storybook-addon-html
Advanced tools
A Storybook addon that extracts and displays compiled syntax-highlighted HTML. Forked from @whitepace with prettier 3 support
This addon for Storybook adds a tab that displays the compiled HTML for each story. It uses highlight.js for syntax highlighting.
Install the addon and its dependencies.
With NPM:
npm i --save-dev @whitespace/storybook-addon-html prettier react-syntax-highlighter
With Yarn:
yarn add -D @whitespace/storybook-addon-html prettier react-syntax-highlighter
// .storybook/main.js
module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-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 in the
html
parameter:
// .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.
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.
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 <!-- -->
.
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:
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.
html: {
transform: (code) => {
// Remove attributes `_nghost` and `ng-reflect` injected by Angular:
return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, "");
};
}
FAQs
A Storybook addon that extracts and displays compiled syntax-highlighted HTML. Forked from @whitepace with prettier 3 support
The npm package @xfinx/storybook-addon-html receives a total of 329 weekly downloads. As such, @xfinx/storybook-addon-html popularity was classified as not popular.
We found that @xfinx/storybook-addon-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.