title: Configure js-beautify within a react component
body: <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>