Nurturing Palpable Magnificence

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

    1.0.3 • Public • Published

    remark-mdx-images

    github actions npm prettier

    A remark plugin for changing image sources to JavaScript imports using MDX

    Installation

    npm install remark-mdx-images

    Usage

    This remark plugin takes markdown images, and converts them into mdx elements <img /> that use JavaScript imports to resolve the image source.

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

    ![Very cute kittens](./kittens.png 'Meow!')

    The following script:

    import { readFileSync } from 'fs';
    
    import { remarkMdxImages } from 'remark-mdx-images';
    import { compileSync } from 'xdm';
    
    const { contents } = compileSync(readFileSync('example.mdx'), {
      jsx: true,
      remarkPlugins: [remarkMdxImages],
    });
    console.log(contents);

    Roughly yields:

    import kittens from './kittens.png';
    
    export default function MDXContent() {
      return (
        <p>
          <img alt="Very cute kittens" src={kittens} title="Meow!" />
        </p>
      );
    }

    Options

    resolve

    By default imports are resolved relative to the markdown file. This matches default markdown behaviour. If this is set to false, this behaviour is removed and URLs are no longer processed. This allows to import images from node_modules. If this is disabled, local images can still be imported by prepending the path with ./.

    Install

    npm i remark-mdx-images

    DownloadsWeekly Downloads

    1,364

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    8.43 kB

    Total Files

    5

    Last publish

    Collaborators

    • remcohaszing