Nuanced Pterodactyl Monk

    @tanelterras-elisa/storybook-addon-html-raw-html

    1.0.2 • Public • Published

    Storybook Addon HTML

    This a fork intended to make use of pull request in original addon: https://github.com/whitespace-se/storybook-addon-html/pull/61

    This addon for Storybook adds a tab that displays the compiled HTML for each story. It uses highlight.js for syntax highlighting.

    Animated preview

    Getting Started

    With NPM:

    npm i --save-dev @whitespace/storybook-addon-html

    With Yarn:

    yarn add -D @whitespace/storybook-addon-html

    Register addon

    // .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 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
      },
    };

    When using Web Components, the HTML will contain empty comments, i.e. <!---->. If you want to remove these, use the removeEmptyComments parameter:

    export const parameters = {
      html: {
        removeEmptyComments: true, // default: false
      },
    };

    By default the HTML will contain DOM rendered attributes. If you want to remove these, use the showRawHTML parameter:

    export const parameters = {
      html: {
        showRawHTML: 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
        },
      },
    };

    Supported frameworks

    As of version 4.0.0 all frameworks are supported per default 🎉

    Install

    npm i @tanelterras-elisa/storybook-addon-html-raw-html

    DownloadsWeekly Downloads

    15

    Version

    1.0.2

    License

    AGPL

    Unpacked Size

    26.3 kB

    Total Files

    17

    Last publish

    Collaborators

    • tanelterras-elisa