title: ReactJS: ascii art issue after JSX transformation
body: <p>I'm trying to get an ascii art to be properly rendered by my React application.</p>
  
  <p>After jsx-transformer is executed my art looses the format and renders pretty strange in the browser</p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Hello World!&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
    &lt;script type="text/jsx"&gt;
  
      var App = React.createClass({
        render: function() {
          return (
            &lt;pre&gt;
              &lt;code&gt;
                +--------+   +-------+    +-------+
                |        |   + ditaa +    |       |
                |  Text  |   +-------+    |diagram|
                |Document|   |!magic!|    |       |
                |        |   |       |    |       |
                +---+----+   +-------+    +-------+
              &lt;/code&gt;
            &lt;/pre&gt;
          );
        }
      });
  
      var element = document.getElementById('content');
      React.render(React.createElement(App), element);
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/1vSNu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1vSNu.png" alt="enter image description here"></a></p>
  
  <p>If I remove react and add the pre code block directly to the html everything works fine.</p>
  
  <p>Am I doing anything wrong here? Any help appreciated...</p>
  
  <p><strong>UPDATE 1</strong>: I cannot edit the ascii art.</p>
  
  <p><strong>UPDATE 2</strong>: I receive the art as a markdown file:</p>
  
  <pre><code>    +--------+   +-------+    +-------+
      |        | --+ ditaa +    |       |
      |  Text  |   +-------+    |diagram|
      |Document|   |!magic!|    |       |
      |        |   |       |    |       |
      +---+----+   +-------+    +-------+
  </code></pre>
  
  <p>After the markdown transformation to HTML this is the string I have:</p>
  
  <pre><code>&lt;pre&gt;&lt;code&gt;+--------+   +-------+    +-------+
  |        | --+ ditaa +    |       |
  |  Text  |   +-------+    |diagram|
  |Document|   |!magic!|    |       |
  |        |   |       |    |       |
  +---+----+   +-------+    +-------+
  &lt;/code&gt;&lt;/pre&gt;
  </code></pre>
  
  <p>I'm still using a JSX-loader to convert the HTML to JSX. The flow is markdown -> html -> jsx</p>