Info description strings containing React components get rendered as React components

[danielduan]

If I pass in a React component to withInfo(markdown)

const markdown = `
~~~js
  // source file for button
  <Button />;
~~~
`;

This will actually render <Button /> into <button></button>

workaround is to escape the <

caused by marksy: storybookjs/marksy#26

[Hypnosphi]

workaround is to escape the <

Should we do it on our side maybe?

[danielduan]

If there's a desire on our side to maintain something like that, I don't see why not.

Basically something like if string is wrapped inside '~~~' and has tag, escape the open?

[Hypnosphi]

No, there are multiple ways to add code blocks in markdown, so it doesn't look such a good idea to me now.

So I would pick one of the options:

1. Apply the highlight workaround I mentioned here: Should skip rendering custom components inside code block marksy#26 (comment)
2. Migrate to react-markdown, which has a similar API

[Hypnosphi]

Looks like we have a third option here =)
storybookjs/marksy#26 (comment)