A remark MDX plugin for using markdown code block metadata
Warning This package has been deprecated. Use
rehype-mdx-code-propsinstead.
npm install remark-mdx-code-metaThis 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent