Docs: Allow dark theme in fenced code blocks

[sheriffMoose]

Closes #20639

Describing the issue

• Using a fenced code like ```javascript dark used to work with v6.5 because Storybook was using mdx1-csf library which in turn was using @mdx-js/mdx to populate the meta attributes of code fences.
• This behavior does not work anymore with v7.0 because we don't involve @mdx-js/mdx anymore, we have to come up with another solution.
• remark-mdx-code-meta was suggested by @JReinhold as a workaround along with another direction of using a rehype plugin thru https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field.
• The use of remark-mdx-code-meta proved non-useful and we had to introduce a rehype plugin to fix the issue instead.

What I did

• [x] introduced a new rehype plugin with the sole purpose to mimic the way @mdx-js/mdx works.

How to test

• [ ] CI Passes.

[sheriffMoose]

@JReinhold 1- you're correct, this only affects webpack for the current time being. We need to plan the vite movement to addon-docs accordingly. 2- The remark-mdx-code-meta plugin does only one thing, it adds attributes to the <pre> tag, this is also mentioned in the official mdx docs you provided at https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field And it also mentions that the best way to access or process the meta values is to do the same as I did using a rehype plugin. Actually the code I added is practically the same snippet provided on the link above.

[JReinhold]

@JReinhold 1- you're correct, this only affects webpack for the current time being. We need to plan the vite movement to addon-docs accordingly.

Yeah we should move the implementation at some point, but for now it would be great if this PR made it work for Vite too.

2- The remark-mdx-code-meta plugin does only one thing, it adds attributes to the \<pre\> tag

I see, and because our custom Source replaces the code tag and not the pre tag, it wouldn't make a difference to us. Bummer.

Actually the code I added is practically the same snippet provided on the link above.

I see, that makes sense.

[sheriffMoose]

@JReinhold, I've done the following:

• [x] add vite support for themed fenced code blocks.
• [x] add code blocks story into addon-docs.
• [x] remove sandbox part that prevented addon-docs from rendering the .mdx files inside template-stories directory.

[sheriffMoose]

@shilman I totally agree with you in regards to making this a recipe instead of implementing it into builder-vite or addon-docs, should we submit a PR to frontpage or close this PR and comment this as a workaround into the issue?

[JReinhold]

@shilman I totally agree with you in regards to making this a recipe instead of implementing it into builder-vite or addon-docs, should we submit a PR to frontpage or close this PR and comment this as a workaround into the issue?

That's a good path forward. @Integrayshaun can probably help with the recipe part.

[ShaunEvening]

@sheriffMoose Making a recipe would be great! Do you have a list of steps for setting this up that you could put together?

[sheriffMoose]

@Integrayshaun I'm preparing a doc and I will share with you shortly.