Awesome

remark-mdx-code-meta

A remark MDX plugin for using markdown code block metadata

Warning This package has been deprecated. Use rehype-mdx-code-props instead.

Installation

npm install remark-mdx-code-meta

Usage

This plugin interprets markdown code block metadata as JSX props.

For example, given a file named example.mdx with the following contents:

```js copy filename="awesome.js" onUsage={props.beAwesome} {...props}
console.log('Everything is awesome!');
```

The following script:

import { readFileSync } from 'fs';

import remarkMdxCodeMeta from 'remark-mdx-code-meta';
import { compileSync } from 'xdm';

const { contents } = compileSync(readFileSync('example.mdx'), {
  jsx: true,
  remarkPlugins: [remarkMdxCodeMeta],
});
console.log(contents);

Roughly yields:

export default function MDXContent(props) {
  return (
    <pre copy filename="awesome.js" onUsage={props.beAwesome} {...props}>
      <code className="language-js">{"console.log('Everything is awesome!');\n"}</code>
    </pre>
  );
}

Of course the <pre /> element doesn’t support those custom props. Use custom [components][] to give the props meaning.

License

MIT @ Remco Haszing