babel-plugin-jsx-code

A list:

babel-plugin-jsx-code

Replace `<Code>` content to render code side by side with source string

Usage

import Code from 'babel-plugin-jsx-code/Component';
 
const RenderCode = ({ source, result }) => (
  <div className="render-code">
    <pre><code>{source}</code></pre>
    <div className="render-result">
      {result}
    </div>
  </div>
);
 
export default () => (
  <div>
    <h2>A list:</h2>
    <Code render={RenderCode}>
      <ul>
        <li>Green</li>
        <li>Red</li>
      </ul>
    </Code>
  </div>
)

Render to:

<div>
  <h2>A list:</h2>
  <div class="render-code">
    <pre>
      <code>
        &lt;ul&gt;
          &lt;li&gt;Green&lt;/li&gt;
          &lt;li&gt;Red&lt;/li&gt;
        &lt;/ul&gt;
      </code>
    </pre>
    <div class="render-result">
      <ul>
        <li>Green</li>
        <li>Red</li>
      </ul>
    </div>
  </div>
</div>