search

whitespace-se / storybook-addon-html

A Storybook addon that extracts and displays compiled syntax-highlighted HTML
Other
95 stars 44 forks source link

Storybook 8 breaks HTML syntax highlighting #119

Closed wmorrison-frontlineed closed 5 months ago

wmorrison-frontlineed commented 6 months ago

It appears that after upgrading to Storybook 8 the rendered HTML is no longer highlighted properly.

image

package.json

"@whitespace/storybook-addon-html": "^6.0.5",
"highlight.js": "^11.9.0",
"prettier": "^3.2.5",
"react-syntax-highlighter": "^15.5.0",

main.js

const config = {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: [
        "@storybook/addon-onboarding",
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@whitespace/storybook-addon-html",
    ],

preview.js

export default {
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
        html: {
            prettier: {
                tabWidth: 2,
                useTabs: false,
                bracketSameLine: true,
            },
            highlighter: {
                showLineNumbers: true,
                wrapLines: true,
            },
        },
    },
};
jeanfredrik commented 5 months ago

Fixed per #126 in v6.1.1