Can not render a <pre> element inside a <table>

[jgthms]

Hi I'm trying to render a <pre> block inside a <td> but it's not rendering (I'm using mdx within Storybook).

Example code:

<table>
  <tbody>
    <tr>
      <td>
        <pre>.button {
  color: blue;
}</pre>
      </td>
    </tr>
  </tbody>
</table>

Is there a way to render a code block inside a table?

[jgthms]

This seems to work, but it strips the whitespace, which should be preserved in <pre> elements:

<table>
  <tbody>
    <tr>
      <td>
        <pre>.button \{
  color: blue;
\}</pre>
      </td>
    </tr>
  </tbody>
</table>

[ChristianMurphy]

It looks like you are trying to render a codeblock?
Another option would be try something like:

<table>
<tbody>
<tr>
<td>

```css 
.button {
  color: blue;
}
```

</td>
</tr>
</tbody>
</table>

mdx 1 (currently used by storybook) allows markdown to be embedded in JSX if there are spacing newlines between the JSX and the Markdown.

[jgthms]

Thanks that's helpful. I had to remove all indentation in the whole table like you did. Unfortunate requirement but it works.

[wooorm]

You’re trying to type as HTML.
But this project is MDX: Markdown (- HTML) + JSX. You have to escape { inside JSX.
More info in the docs: https://mdxjs.com/docs/what-is-mdx/.