Replace code block language overloading with React components

[grossbart]

Instead of overloading the code block language parameter with specimen types, change the Markdown renderer to accept React components. With this in place, we can include specimens as JSX React components, clarifying intent and simplifying configuration/extension possibilities.

To help with this endeavor, we might switch to Remarkable as a Markdown renderer. There is the React Remarkable plugin that in theory should support this out of the box:

<Markdown>
  # Catalog example

  > A short introduction

  ## A card

  This card shows a specimen:

  <HtmlSpecimen>
    <button class="button">Button</button>
  </HtmlSpecimen>

  More content follows
</Markdown>

[jstcki]

Yes! I like this approach very much.

Although I'm not sure if it's that easy to integrate with Markdown files which are loaded on demand. Normally you would do something like:

fetch('foo.md').then((md) => React.render(<Markdown source={md} />, el);

But this way, only plain Markdown will be parsed. And as far as I know, this won't change anything because React will see the whole Markdown content as one string:

fetch('foo.md').then((md) => React.render(<Markdown>{md}</Markdown>, el);

Edit: To clarify, I mean files which contain Markdown mixed with React components, e.g.

# Foo

Bar

<HtmlSpecimen dark>
  <button>Button</button>
</HtmlSpecimen>

...

[grossbart]

Of course, pity …

[jstcki]

Too difficult at the moment because we'd need to build a custom Markdown parser or extend an existing one.