Home Core Concepts Contributing Fluent API(FluentMap)(FluentSet)Babel ESLint Jest Mdx Prettier TSLint Webpack Presets Runners (core)Runners (other)Starter Kits

# Configuring Mdx

> Markdown for the component era

The `@berun/fluent-mdx` package provides a high level fluent interface for configuring and using `Mdx`.

## Installation

`@berun/fluent-mdx` is a utility interface that is automatically included by common BeRun presets such as `@berun/preset-bestatic`. If you need to install it directly, follow these directions:

    $ npm install --save-dev @berun/fluent-mdx

### 1. Embed within `berun.config.ts`

    // berun.config.ts

    export default {
      use: [
         // ...
        '@berun/fluent-mdx',
        // ...
      ]
    }

### or 2. Use from within other BeRun middleware

    const mdx = require('@berun/fluent-mdx');

    function(berun) {
        berun.use(mdx);
    }

## Mdx shorthand methods

    berun.mdx
      .rehype(name)
      .remark(name)

Moving to deeper points in the API will change the context of what you are modifying. You can move back to the higher context by either referencing the top-level `berun.mdx` again, or by calling `.end()` to move up one level. All API calls will return the API instance at the current context unless otherwise specified. This is so you may chain API calls continuously if desired ('fluent interface')

For details on the specific values that are valid for all shorthand and low-level methods, please refer to their corresponding name in the mdx docs.

### Mdx Remark Plugins

    // Backed at berun.mdx.remarkPlugins
    berun.mdx.remark(name, useStringOrFunction?, options?) : FluentMap

    // Example
      berun.mdx
        .remark('remark-images')
        .end()
        .remark('remark-autolink-headings')
        .end()
        .remark('remark-emoji', 'remark-emoji', { padSpaceAfter: true })
        .end()

### Mdx Rehype (Hast) Plugins

    // Backed at berun.mdx.rehypePlugins
    berun.mdx.rehype(name, useStringOrFunction?, options?) : FluentMap

    // Example
      berun.mdx
        .rehype('@mapbox/rehype-prism')
        .end()

## Conditional configuration

When working with instances of `FluentMap` and `FluentSet`, you can perform conditional configuration using `when`. You must specify an expression to `when()` which will be evaluated for truthiness or falsiness. If the expression is truthy, the first function argument will be invoked with an instance of the current chained instance. You can optionally provide a second function to be invoked when the condition is falsy, which is also given the current chained instance.

    // Example: Only add images plugin during production
    config
      .when(process.env.NODE_ENV === 'production', berun => {
        berun.mdx.remark('remark-images')
      });

## Inspecting generated configuration

You can inspect the generated Mdx config using `berun.mdx.toConfig()`.

    expect(berun.mdx.toConfig()).toEqual({
        remarkPlugins: [
          ['remark-images', { replaced: true }],
          'remark-autolink-headings',
          ['remark-emoji', { padSpaceAfter: true }]
        ]
      })

‹ previous
next ›