HTML 显示原始文本

Question

我有一个 HTML 页面，需要在其中显示一些日志消息。我把它们包裹在 中<pre></pre>，但它似乎将日志消息解释为 HTML，我希望它原始打印。我尝试了“像文本编辑器一样在 HTML 中显示原始文本”或“防止 <code> 标记中的自动换行符”或“如何使用 CSS 在 HTML <code> 块中保留换行符？ ”中给出的建议，但都不起作用（它们给出的结果与我原来的 HTML 相同。

这是我的 HTML 页面：

code {
  font-size: 14px;
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}
body {
  font-family: Arial;
}

<div>
  <h3>pre and code:</h3>
  <pre>
    <code>
[2016-06-24 16:06:00]|DEBUG|...., details='#<hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360">'
    </code>
  </pre>
</div>

<div>
  <h3>only code:</h3>
  <code>
[2016-06-24 16:06:00]|DEBUG|...., details='#<hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360">'
  </code>
</div>

<div>
  <h3>only pre:</h3>
  <pre>
[2016-06-24 16:06:00]|DEBUG|...., details='#<hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360">'
  </pre>
</div>

以下是它在浏览器（Mac 中最新的 Chrome）上呈现的内容：

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='#'

注意遗漏的hashie::mash

我想要它打印的是：

  [2016-06-24 16:06:00]|DEBUG|...., details='#<hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360">'

当日志包含一些 XML 时，我遇到了类似的问题。

Answer 1

我知道的最简单的方法：使用<textarea>

textarea { white-space: nowrap; }

<textarea rows="8" cols="50" >
[2016-06-24 16:06:00]|DEBUG|...., details='#<hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360">'
</textarea>