This package has been deprecated

Author message:

Use rehype-mdx-code-props instead

remark-mdx-code-meta
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

remark-mdx-code-meta

github actions npm prettier codecov

A remark MDX plugin for using markdown code block metadata

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

Package Sidebar

Install

npm i remark-mdx-code-meta

Weekly Downloads

5,950

Version

2.0.0

License

MIT

Unpacked Size

5.66 kB

Total Files

5

Last publish

Collaborators

  • remcohaszing