How do I add code blocks to my MDX files?

[IPWright83]

I was using Storybook 7 (beta) and had some code blocks using standard markdown:

Multiline
Codeblock
like this

I've updated all my dependencies to the latest Storybook (7.5.2) but my codeblocks all broke. I was using the @storybook/addon-mdx-gfm addon before (I'm not sure this actually does the code blocks though) and I've tried switching to remark-gfm and that doesn't make a difference either. I've currently got hand rolled MDX files to accompany my stories:

import { Story, Canvas, Meta } from "@storybook/blocks";

<Meta title="Getting Started" />

# Getting Started

To get started with ... first ensure that you've installed the package using one of the following commands:

// this is my broken codeblock
npm install ... //npm
yarn add ...     // yarn
pnpm add ...     // pnpm

So I'm wondering how people are adding in codeblocks or have I just hit a bug?

Here's my current config file:

import remarkGfm from "remark-gfm";
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-docs",
      options: {
        mdxCompileOptions: {
          remarkPlugins: [remarkGfm],
        },
      },
    },
    "@storybook/addon-actions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};

export default config;

This is what my codeblocks currently look like:

But they used to look like this:

[IPWright83]

I've noticed that prismjs seems to be the difference between the two. The working one has the following HTML:

<pre class="prismjs css-4zr3vl">
    <div class="language-plaintext css-1lwmlsb" style="white-space: pre;">
        <span class="">npm install ...  //npm</span>
        yarn add ...     // yarn
        pnpm add ...     // pnpm
     </div>
</pre>

The broken one just has:

<pre>
    <code>
        npm install ...  //npm
        yarn add ...     // yarn
        pnpm add ...     // pnpm
    </code>
</pre>

[jonniebigodes]

@IPWright83, thanks for taking the time to reach out to us with your question. We appreciate it 🙏 ! And to give you some context, documentation and, in this case, syntax highlighting was something that got some improvements with the major release (e.g., 7.0) and continued to get more updates in follow-up releases (e.g., 7.1, etc). If there's no language specified using triple backticks Storybook treats it as text by default. If you specify one of the supported languages (i.e., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) it will recognize it and style it accordingly. I've created a small reproduction here if you're interested and got it deployed here

Let us know if this was able to unblock you and get your documentation showcased as it should. If not can you provide us a reproduction so that it can be looked at?

Looking forward to hearing from you.

Have a fantastic day.

Stay safe

[IPWright83]

Thanks! I think it turns out it's because I'm actually hitting this bug that I later logged 😞#24729 (comment)

[IPWright83]

Hi @jonniebigodes, I know this is much much later since I asked this question. It turns out that trying to use Storybook v8 I hit a very similar issue. I must not have gotten around to actually converting these files but I'm trying to work out if there's a way to achieve the same without a triple backtick block?

I've discovered that doing something just like <Area> (single back ticks) completely breaks storybook, whereas a triple back tick with the language specifier works. However this makes it incredibly difficult mixing your content like this:

Do you know how I could achieve this in Storybook v8? I hope you don't mind me resuming the conversation here but it feels it's a continuation of "how do I upgrade"

Thanks!

[IPWright83]

Logged a related bug, as actually I don't think it should fail badly like this #29665