rehype-mdxjs-inject-code-prop
v0.1.0
Published
Inject code as prop
Downloads
8
Maintainers
Readme
About
A MDX - rehype plugin that uses injects code
prop on targeted components. Code segment is generated from target component's children
property.
This is a lightweight and straightforward implementation of storybook concept as you can get code preview + code really fast while documenting your components inside .mdx
files
Uses prettier to format code segment.
Installataion
npm install rehype-mdxjs-inject-code-prop -D
or
yarn add rehype-mdxjs-inject-code-prop -D
Usage
With mdx core compiler
import { transform as rehypeInjectCodeAsProp } from 'rehype-mdxjs-inject-code-prop'
import { compile } from '@mdx-js/mdx';
const code = compile('./src/mdxFileSource.mdx', {
rehypePlugins: [rehypeInjectCodeAsProp({
componentToInject: /MyCodeComponent|MyOtherCodeComponent/
})]
});
// Do something with the code...
// console.log(code)
Options
| option | required | Description | default |
| --- | --- | --- | --- |
| extensions | false
| What extensions will be used when resolving source code paths. Unused if custom moduleResolver
is used | ['.tsx', '.js', '.json', '.ts', '.jsx', '.mdx']
| componentToInject | true
| Component name(s) where code will be injected | undefined
| propName | false
| Prop name for injected code | code
| moduleResolver | false
| A custom function resolver for ES modules inside MDX files. You probably don't wanna tackle this unless you need some specific module resolving logic. By default it uses browserify resolve | resolveSync(...)