hops-mdx

Please see the main Hops Readme for general information and a Getting Started Guide.

This is a preset for Hops that brings MDX support to your application.

Installation

This preset must be used together with the hops-react preset.

npm install --save hops-mdx

If you don't already have an existing Hops project read this section on how to set up your first Hops project.

Basic usage

Create a file src/content.mdx:

# Hello World!

This **is** a _paragraph_.

Then import it as a component in your src/app.js:

import React from 'react';
import { render } from 'hops';
import Content from './content.mdx';

export default render(<Content />);

This will render a single Hops page with the content:

<h1>Hello World!</h1>
<p>This <strong>is</strong> a <em>paragraph</em>.</p>

For advanced usage, check out the MDX documentation.

Configuration

Preset Options

This preset can be configured through the "mdx" key in your preset config.

"hops": {
  "mdx": {
    "remarkPlugins": […]
  }
}

| Name | Type | Required | Description | | ------------------- | ------------- | ----------------------- | ----------- | -------------------------------------------------------------------- | | mdx.remarkPlugins | Array<String | Array<String, Object>> | no | Optional list of Remark plugins. |

remarkPlugins

Pass in the module names of remark plugins. E.g. to enable remark-emoji:

{
  "mdx": {
    "remarkPlugins": ["remark-emoji"]
  }
}

If the plugin provides the setting of options, you can pass in an array holding the plugin name and an options object, instead of just the name.

{
  "mdx": {
    "remarkPlugins": [["remark-emoji", { "padSpaceAfter": true }]]
  }
}