The ultimate docs codeblock

[johno]

It'd be useful to build a powerful codeblock. The existing codeblock in MDX docs needs features like syntax highlighting, file name support, language labelling, live code editing, cut and paste, etc.

There are a wide array of different code block usages in the docs that could be more welcoming and include more information.

It should use the metastring for configuring different features and use the codeblock language to determine language type.

Implementation

This should likely be built as its own library because it could be usable by other folks/projects.

The language can be either JSX or MDX (for now) and uses the standard MD language feature of code fences.

    ```js
    I'm JS
    ```

Metastring	Default	Description
repl	false	Add the live code editor
title	None	Add a title above the rendered code
copy	false	Add icon to copy contents to the clipboard

Usage

    ```mdx repl=true title=posts/my-post.mdx
    I'm JS
    ```

Caveats

For the repl we can use react-live, but we will need to be able to strip out import and export statements in MDX files (via plugins).

Examples

• Gatsby has a solid codeblock we can draw inspiration from
• https://github.com/FormidableLabs/react-live

[shawnbot]

Huge thumbs up from me on this one. I'd also (or alternatively) love it if the metastring could either support quoted values (I've had success using parse-pairs in code-blocks before MDX was a thing) or, better yet, any valid JSX props expression:

```mdx numericProp={1} booleanProp someOtherProp="a string"

In that case, couldn't you insert the metastring into the JSX as-is?

<MDXTag name="code" numericProp={1} booleanProp someOtherProp="a string">

[johno]

We've begun work on this component in Theme UI, so I'm going to close this.

Related: system-ui/theme-ui#212