v0.2.5
Documentation
IntroductionGetting StartedSyntaxComponentsThemingPresentExamples
API
@mdxp/core
@mdxp/components
@mdxp/rehypex-plugins
Auto ImportBetter MediaTable Align

Better Media

Auto Import is a Rehype plugin for MDXHAST that transforms HAST img nodes into JSX nodes, performing the following modifications:

  • Create an image or video node.
  • Parse width, height and/or style properties from the alternate text field.
  • Parse other properties (eg. controls, autoplay, loop) from the alternate text field

Arguments

videoTest
regex
/.(mp4|webm|avi|mpe?g|wmv|ogg)$/i
videoMarker
string
null (not being used)
altSeparator
string
&&

Usage

To use this plugin, put it in the rehypePlugins option of your MDX-JS loader.
In this example we also pass the string '!video!' as videoMarker option.

// Webpack example
const rehypeBetterMedia = require('@mdxp/rehypex-plugins/better-media');
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx$/,
        use: [
          'babel-loader',
          {
            loader: '@mdx-js/loader',
            options: {
              rehypePlugins: [
                [rehypeBetterMedia, {videoMarker: '!video!'}]
              ]
            }
          }
        ]
      },
      ...
    ]
  }
}

Examples

Once the plugin is setup, you can write the following code:

![logo image](./path/to/logo.png "An image of my logo")
// Gets transformed by the plugin to:
<img alt="logo image" src="./path/to/logo.png" title="An image of my logo" />
// Note that style should be defined as a JSX property (double braces)
![image&&style={{border: '5px solid red'}}&&width='80%'](./path/to/image.jpg)
// Gets transformed by the plugin to:
<img alt="image" src="./path/to/image.jpg" style={{border: '5px solid red', width: '80%'}} />
![video&&autoplay&&loop](./path/to/video.mp4)
// Gets transformed by the plugin to:
<video alt="video" src="./path/to/video.mp4" autoplay loop />
![online video&&controls](!video!https://www.thiscoolvideo.com)
// Gets transformed by the plugin to:
<video alt="online video" src="https://www.thiscoolvideo.com" controls />