output.html

<pre>
  <code>
    module.exports = {
      <ul> /* This would be rendered by the React component */
        <li clas="default">production</>
        <li>development</li>
        <li>none</li>
      </ul>
    }
  </code>
</pre>

source.md

module.exports = {
  mode: "production" <marker modes>
}

transformer.js

// Pseudocode

import Modes from 'modes' // React component which would display a dropdown or whatever
// This could be a dictionary like: `{ "marker": <ReactComponent /> }`

const tree = // Markdown tree, actually an array
const modePosition = findModeMarker(tree)

tree[modePosition] = <Modes />