{"_id":"@dgonzalezr/storybook-addon-html","name":"@dgonzalezr/storybook-addon-html","dist-tags":{"latest":"5.0.0"},"versions":{"5.0.0":{"name":"@dgonzalezr/storybook-addon-html","version":"5.0.0","description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","main":"dist/preset.js","keywords":["addon","storybook","html","storybook-addon","code","popular"],"repository":{"type":"git","url":"git+https://github.com/dgonzalezr/storybook-addon-html.git"},"scripts":{"build":"yarn clean && babel -d ./dist ./src","build:watch":"babel --watch -d ./dist ./src","clean":"rm -rf ./dist","prepare":"yarn build","prepublishOnly":"cp ../README.md ."},"author":{"name":"Dabiel Gonzalez Ramos"},"license":"AGPL","devDependencies":{"@babel/cli":"^7.18.10","@babel/core":"^7.19.1","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/preset-env":"^7.19.1","@babel/preset-react":"^7.18.6","@storybook/addons":"^6.5.12","@storybook/react":"^6.5.12","babel-eslint":"^10.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"peerDependencies":{"@storybook/addons":"^6.5.12","react":">=17.0.2","react-dom":">=17.0.2"},"dependencies":{"@babel/generator":"^7.19.0","@babel/parser":"^7.19.1","@storybook/api":"^6.5.12","@storybook/components":"^6.5.12","prettier":"^2.7.1","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public"},"storybook":{"icon":"https://avatars1.githubusercontent.com/u/10450088?s=400&u=b2a95469b7d2addf63366a93a17f0bd06f9894cc&v=4","displayName":"HTML preview"},"gitHead":"022ea0f6da2b8b63da6ebf90730491058f3c2c87","bugs":{"url":"https://github.com/dgonzalezr/storybook-addon-html/issues"},"homepage":"https://github.com/dgonzalezr/storybook-addon-html#readme","_id":"@dgonzalezr/storybook-addon-html@5.0.0","_nodeVersion":"16.14.2","_npmVersion":"8.18.0","dist":{"integrity":"sha512-dQe5CewoVkdGOGFPg4A5zbdxtnzUZTVSk2CAZefFPUdMkoLxTa9tRnblttPAOFjZt2og9+/DzBdHstC7yvmzuA==","shasum":"ace1b9004643f4012769af6f5896a9cc58eb0cad","tarball":"https://registry.npmjs.org/@dgonzalezr/storybook-addon-html/-/storybook-addon-html-5.0.0.tgz","fileCount":17,"unpackedSize":16543,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHYzPDqXNhzEHh6sD4r8mbD74FGSZIch6pqZ19MYP2cjAiEArdxpT9ufbcDYVs+eF0h0FClvJJk6RAbGiCodSONnOJ8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLeJUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmowmw/+LDnXmI+lyRPkUMANS/ME29xvuyJ2uZV4M2YFxjHAz/9do2YG\r\nM7lSBy5aMD1nfV3d0c9hZOcAVYE+SpdyxkYRtF2DgzXH6MapkJ5/FcLAhqRN\r\ne5H4z0RbK8t93+XBeHR8fmtyw/eudoqffj8NMNN5P+2Ci3qIUcBLu6LZnhRE\r\nMIJOWa4o4T/1xaaIkaqww6TGlxbkGtcmiNrsGBOJNSn0cqpFxdNN4RPxDqkB\r\nxeKyfTJN3GkhzPcTFgPt1SWDKsSah+KRxLeP3nvtujEl/xQa3LVDFzAn8Z8T\r\nVL2RHtNefNm2V7aviwVULbLFRsj2R63C0ajkhZGYrPLYhQbXodOk0FBqA//2\r\ne1eAmuNIl0zoNGx6B0+56rZLH4mvVnCnT670lPyixHgB7RvhJYTXnfg/Tcxk\r\n+ri0BK5bXP+S/Ba8ACw2zDdUBVTiu3d9U98tCCCtQA1FNaxBGrvw/b8oI4+i\r\nuAB25f+jLK8B96aQY++G+w2qd1Lxf6ScbMHuYJGLWeQUx6TkGDyQPQembGBg\r\nCcYR65z+2VhHmQaHaRr9uPSyrvOrRBChbTlvBVtTDkPwqMbthSAtACUb9/Sf\r\nw01jbFX9jBgmCCeB0h/njpAkS+pQF1yg1iTqmAMmd9BbbHB9QBHVJBhBrkAY\r\nCZBaspM8S8X0U9VlhOEPbeW61HBlxjk/Q8Y=\r\n=hTRF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"},"directories":{},"maintainers":[{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-html_5.0.0_1663951444496_0.5058928515702015"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-23T16:44:04.346Z","5.0.0":"2022-09-23T16:44:04.695Z","modified":"2022-09-23T16:44:04.895Z"},"maintainers":[{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"}],"description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","homepage":"https://github.com/dgonzalezr/storybook-addon-html#readme","keywords":["addon","storybook","html","storybook-addon","code","popular"],"repository":{"type":"git","url":"git+https://github.com/dgonzalezr/storybook-addon-html.git"},"author":{"name":"Dabiel Gonzalez Ramos"},"bugs":{"url":"https://github.com/dgonzalezr/storybook-addon-html/issues"},"license":"AGPL","readme":"# Storybook Addon HTML\n\nThis addon for Storybook adds a tab that displays the compiled HTML for each\nstory. It uses [highlight.js](https://highlightjs.org/) for syntax highlighting.\n\n![Animated preview](https://raw.githubusercontent.com/whitespace-se/storybook-addon-html/master/image.gif)\n\n## Getting Started\n\nWith NPM:\n\n```sh\nnpm i --save-dev @dgonzalezr/storybook-addon-html\n```\n\nWith Yarn:\n\n```sh\nyarn add -D @dgonzalezr/storybook-addon-html\n```\n\n### Register addon\n\n```js\n// .storybook/main.js\n\nmodule.exports = {\n  // ...\n  addons: [\n    '@dgonzalezr/storybook-addon-html',\n    // ...\n  ],\n};\n```\n\n## Usage\n\nThe HTML is formatted with Prettier. You can override the Prettier config\n(except `parser` and `plugins`) by providing an object following the\n[Prettier API override format](https://prettier.io/docs/en/options.html) in the\n`html` parameter:\n\n```js\n// .storybook/preview.js\n\nexport const parameters = {\n  // ...\n  html: {\n    prettier: {\n      tabWidth: 4,\n      useTabs: false,\n      htmlWhitespaceSensitivity: 'strict',\n    },\n  },\n};\n```\n\nYou can override the wrapper element selector used to grab the component HTML.\n\n```js\nexport const parameters = {\n  html: {\n    root: '#my-custom-wrapper', // default: #root\n  },\n};\n```\n\nWhen using Web Components, the HTML will contain empty comments, i.e. `<!---->`, or `<!--..lit$..-->` if using [lit-html](https://lit.dev/docs/). If you want to remove these, use the `removeComments` parameter:\n\n```js\nexport const parameters = {\n  html: {\n    removeComments: true, // default: false\n  },\n};\n```\n\nyou can also provide your own regular expression to remove specific HTML comments:\n\n```js\nexport const parameters = {\n  html: {\n    // Remove only lit HTML comments, eg: `<!--?lit$117057236$-->`\n    removeComments: /<!--(.lit.*?)-->/g, \n  },\n};\n```\n\nYou can override the `showLineNumbers` and `wrapLines` settings for the syntax\nhighlighter by using the `highlighter` parameter:\n\n```js\nexport const parameters = {\n  html: {\n    highlighter: {\n      showLineNumbers: true, // default: false\n      wrapLines: false, // default: true\n    },\n  },\n};\n```\n\n## Supported frameworks\n\nAs of version 4.0.0 all frameworks are supported per default 🎉\n","readmeFilename":"README.md"}