docusaurus/packages/docusaurus-mdx-loader/src/index.js

/**
 * Copyright (c) 2017-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
const {getOptions} = require('loader-utils');
const mdx = require('@mdx-js/mdx');
const rehypePrism = require('@mapbox/rehype-prism');

const DEFAULT_OPTIONS = {
  rehypePlugins: [[rehypePrism, {ignoreMissing: true}]],
  prismTheme: 'prism-themes/themes/prism-atom-dark.css',
};

module.exports = async function(content) {
  const callback = this.async();

  const options = Object.assign(DEFAULT_OPTIONS, getOptions(this), {
    filepath: this.resourcePath,
  });
  let result;

  try {
    result = await mdx(content, options);
  } catch (err) {
    return callback(err);
  }

  let importStr = '';
  // If webpack target is web, we can import the css
  if (this.target === 'web') {
    importStr = `import '${options.prismTheme}';`;
  }

  const code = `
  import React from 'react';
  import { mdx } from '@mdx-js/react';
  ${importStr}
  ${result}
  `;

  return callback(null, code);
};