HTML display raw text
<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>