title: HTML display raw text
body: <p>I have an HTML page where I need to display some log messages. I had them wrapped in <code>&lt;pre&gt;&lt;/pre&gt;</code>, but it seems to be interpreting the log messages as HTML, I want it to print it raw. I tried suggestions given in "<a href="https://stackoverflow.com/questions/9811215/displaying-raw-text-in-html-like-a-text-editor">Displaying raw text in HTML like a text editor</a>" or "<a href="https://stackoverflow.com/questions/16445229/prevent-automatic-line-breaks-in-a-code-tag">Prevent automatic line breaks in a &lt;code&gt; tag</a>" or "<a href="https://stackoverflow.com/questions/1011641/how-can-i-use-css-to-preserve-line-breaks-in-an-html-code-block">How can I use CSS to preserve line breaks in an HTML &lt;code&gt; block?</a>", but none work (they give same result as my original HTML.</p>
  
  <p>Here is my HTML page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>code {
    font-size: 14px;
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
  }
  body {
    font-family: Arial;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h3&gt;pre and code:&lt;/h3&gt;
    &lt;pre&gt;
      &lt;code&gt;
  [2016-06-24 16:06:00]|DEBUG|...., details='#&lt;hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360"&gt;'
      &lt;/code&gt;
    &lt;/pre&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;h3&gt;only code:&lt;/h3&gt;
    &lt;code&gt;
  [2016-06-24 16:06:00]|DEBUG|...., details='#&lt;hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360"&gt;'
    &lt;/code&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;h3&gt;only pre:&lt;/h3&gt;
    &lt;pre&gt;
  [2016-06-24 16:06:00]|DEBUG|...., details='#&lt;hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360"&gt;'
    &lt;/pre&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is what it renders on browser (latest Chrome in Mac):</p>
  
  <pre><code>pre and code:
  
  
  
    [2016-06-24 16:06:00]|DEBUG|...., details='#'
  
  
  
  only code:
  
  
    [2016-06-24 16:06:00]|DEBUG|...., details='#'
  
  only pre:
  
    [2016-06-24 16:06:00]|DEBUG|...., details='#'
  </code></pre>
  
  <p><strong>NOTE the missing <code>hashie::mash</code></strong></p>
  
  <p>What I want it to print is:</p>
  
  <pre><code>  [2016-06-24 16:06:00]|DEBUG|...., details='#&lt;hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360"&gt;'
  </code></pre>
  
  <p>I run into similar problems when the log contains some XML.</p>