title: "Advanced MDX Transformations" description: "Explore advanced techniques for transforming MDX content using remark and rehype plugins."

Custom Remark Plugin

Creating a Plugin

To initiate the process, let's craft a custom remark plugin.

// remark-plugin-example.js
import { visit } from 'unist-util-visit';

function remarkPluginExample() {
  return (tree) => {
    visit(tree, 'text', (node) => {
      node.value = node.value.toUpperCase();
    });
  };
}

export default remarkPluginExample;

Employing the Plugin

To utilize the plugin, incorporate it into your next.config.js file.

// next.config.js
const withMDX = require('@next/mdx')({
  options: {
    remarkPlugins: [require('./remark-plugin-example.js')],
  },
});

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
});

This plugin transforms all text to uppercase.

Custom Rehype Plugin

Plugin Creation

Similarly, a custom rehype plugin can be constructed.

// rehype-plugin-example.js
import { visit } from 'unist-util-visit';
import { h } from 'hastscript';

function rehypePluginExample() {
  return (tree) => {
    visit(tree, 'element', (node) => {
      if (node.tagName === 'p') {
        node.children.unshift(h('strong', 'Prefix: '));
      }
    });
  };
}

export default rehypePluginExample;

Plugin Implementation

Integrate this plugin into next.config.js.

// next.config.js
const withMDX = require('@next/mdx')({
  options: {
    rehypePlugins: [require('./rehype-plugin-example.js')],
  },
});

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
});

This plugin prepends "Prefix: " to every paragraph.

Integrating with Images

Remark Images

You can use remark plugins to optimize images.

// remark-image-metadata.js
import { visit } from 'unist-util-visit';
import sizeOf from 'image-size';
import { URL } from 'url';

function remarkImageMetadata() {
  return (tree) => {
    visit(tree, 'image', (node) => {
      let dimensions;
      try {
        dimensions = sizeOf(new URL(node.url).pathname.slice(1));
      } catch (e) {
        console.warn('failed to get dimensions for ' + node.url, e);
      }

      if (dimensions) {
        node.width = dimensions.width;
        node.height = dimensions.height;
      }
    });
  };
}

export default remarkImageMetadata;

Usage

Incorporate remark-image-metadata.js into your next.config.js.

// next.config.js
const withMDX = require('@next/mdx')({
  options: {
    remarkPlugins: [require('./remark-image-metadata.js')],
  },
});

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
});

This plugin adds width and height attributes to images.

Custom MDX Components

Creating a Component

Define a custom component for MDX.

// components/InsImage.jsx
const InsImage = ({ src, alt }) => {
  return (
    <div className="image-container">
      <img src={src} alt={alt} />
      <style jsx>{`
        .image-container {
          border: 1px solid black;
          padding: 10px;
        }
      `}</style>
    </div>
  );
};

export default InsImage;

Utilizing the Component

Employ the custom component within your MDX files.

import InsImage from '../components/InsImage';

<InsImage src="/images/example.png" alt="Example Image" >

This showcases how to use a custom image component.

---
title: "Advanced MDX Transformations"
description: "Explore advanced techniques for transforming MDX content using remark and rehype plugins."
---

# Diving Deep into Complex MDX Modifications

Let's examine intricate approaches to altering MDX content through the utilization of remark and rehype plugins.

## Tailored Remark Plugin

### Plugin Construction

To begin, let's develop a personalized remark plugin.

```javascript
// remark-plugin-example.js
import { visit } from 'unist-util-visit';

function remarkPluginExample() {
  return (tree) => {
    visit(tree, 'text', (node) => {
      node.value = node.value.toLocaleUpperCase();
    });
  };
}

export default remarkPluginExample;

Plugin Application

To put the plugin into action, integrate it within your next.config.js file.

// next.config.js
const withMDX = require('@next/mdx')({
  options: {
    remarkPlugins: [require('./remark-plugin-example.js')],
  },
});

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
});

This plugin will convert all text to uppercase letters.

Tailored Rehype Plugin

Plugin Development

In a similar vein, a custom rehype plugin can be created.

// rehype-plugin-example.js
import { visit } from 'unist-util-visit';
import { h } from 'hastscript';

function rehypePluginExample() {
  return (tree) => {
    visit(tree, 'element', (node) => {
      if (node.tagName === 'p') {
        node.children.unshift(h('strong', 'Beginning: '));
      }
    });
  };
}

export default rehypePluginExample;

Plugin Implementation

Incorporate this plugin within next.config.js.

// next.config.js
const withMDX = require('@next/mdx')({
  options: {
    rehypePlugins: [require('./rehype-plugin-example.js')],
  },
});

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
});

This plugin adds "Beginning: " to the start of each paragraph.

Integration with Images

Remark Images

You have the ability to leverage remark plugins to optimize images.

// remark-image-metadata.js
import { visit } from 'unist-util-visit';
import sizeOf from 'image-size';
import { URL } from 'url';

function remarkImageMetadata() {
  return (tree) => {
    visit(tree, 'image', (node) => {
      let dimensions;
      try {
        dimensions = sizeOf(new URL(node.url).pathname.substring(1));
      } catch (e) {
        console.warn('failed to retrieve dimensions for ' + node.url, e);
      }

      if (dimensions) {
        node.width = dimensions.width;
        node.height = dimensions.height;
      }
    });
  };
}

export default remarkImageMetadata;

Application

Incorporate remark-image-metadata.js within your next.config.js.

// next.config.js
const withMDX = require('@next/mdx')({
  options: {
    remarkPlugins: [require('./remark-image-metadata.js')],
  },
});

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
});

This plugin appends width and height attributes to image elements.

Bespoke MDX Components

Component Development

Define a custom component intended for MDX use.

// components/InsImage.jsx
const InsImage = ({ src, alt }) => {
  return (
    <div className="image-container">
      <img src={src} alt={alt}>
      <style jsx>{`
        .image-container {
          border: 1px solid black;
          padding: 10px;
        }
      `}</style>
    </div>
  );
};

export default InsImage;

Component Usage

Use the custom component within your MDX documents.

import InsImage from '../components/InsImage';

<InsImage src="/images/example.png" alt="Example Image" >

This demonstrates the process of utilizing a custom image component.