Using Storybook/React v8, how to make a presentation page with multiple code blocks

[roypearce]

Summary

TLDR: Can someone show me an example of how to achieve a documentation only story with code examples for documenting css classes with @storybook/react essentially how this storybook page does it with @storybook/html?

I have a design system coded up in @storybook/react that I just upgraded to v8.0.9. This storybook has React components but also documents all of the css classes that ship with it. Due to breaking mdx changes, I'm migrating my mdx pages that documented all the css classes.

Documenting the components is straight forward enough and well documented. However for the css classes, it's purely documentational, there is not a component per-se to use in a CSF format story, which breaks the story paradigm. I need to write descriptions and have a visual example with source code for each class or combination of classes.

As an example of what I would like to do you can visit this public storybook page, this is not what I am working on, just an example of my goal. Looking at the source code in github, they are using @storybook/html. They have html based examples which they are importing into a story. This html source then gets wrapped in a code Canvas automatically with nicely formatted source code, it creates a single page in the left menu (No separate Documentation page), and includes several different classes and individual examples for each on one page. I've tried to do things as they are with this site in my own storybook, but it is not working at all. After adding html-loader to the webpack config and importing the html like they do, it just shows minified and escaped html as the story, not in a Canvas code block. We're on the same Storybook version btw. I think the difference is that @storybook/html can do stories differently than @storybook/react?

Additional information

No response

Create a reproduction

No response