Configure js-beautify within a react component
<p>I am using <a href="https://github.com/beautify-web/js-beautify" rel="nofollow">js-beautify</a> (the html-beautify option) to format html that is being displayed on my page, <s>it displays but it's collapsing all the html to 1 line which is obviously not ideal because it's a pain to read.</s> It is basically trying to format HTML as Javascript because the actual <code>html beautify</code> is not being applied.</p>

<p>I'm using it in react as below inside a specific component file for that item does anyone know how to fix this?</p>

<pre><code>import htmlBeautify from 'js-beautify'

const htmlString = htmlBeautify(renderToStaticMarkup(&lt;Component /&gt;))

export default () =&gt;
    &lt;Example staticMarkup={htmlString}&gt;
      &lt;Component /&gt;
    &lt;/Example&gt;
</code></pre>

<p><strong>Update:</strong>
<code>&lt;Example/&gt;</code> is another component that renders out a bunch of additional stuff like a markdown description. </p>

<p>I'm using <a href="https://github.com/alexlande/react-style-guide" rel="nofollow">https://github.com/alexlande/react-style-guide</a> to create a styleguide and passing the static html markup to <code>staticMarkup</code> prop to display rather than just showing the react component which in this context isn't particulary useful.</p>