HTML 显示原始文本

Question

我有一个 HTML 页面，需要在其中显示一些日志消息。我把它们包裹在

<pre></pre>

中，但它似乎将日志消息解释为 HTML，我希望它原始打印。我尝试了“像文本编辑器一样在 HTML 中显示原始文本”或“防止 标记中的自动换行符

”或“如何使用 CSS 在 HTML  块中保留换行符？”中给出的建议”，但都不起作用（它们给出的结果与我原来的 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>

Answer 2

您可以将要显示原始内容的部分包装在 xmp 标签中。

<xmp>[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">'</xmp>

正如其他人指出的那样，xmp 已被弃用。这样会更好：

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

您可以将 '<' with < and replace '>' 替换为 >

，而不是用 xmp 标签包装

Answer 3

尝试用 HTML 代码替换 <>（标签）。示例：

<pre>some text</pre> change it to : &lt;pre&gt;sometext &lt;/pre&gt;

Answer 4

抱歉我误解了这个问题。请将

<hashie::

替换为

&#60hashie::

Answer 5

textarea 不考虑文本的大小。 IMO 更好的解决方案：

<pre><code><script style="display:block" type="text/plain">..your raw text here..</script></code></pre>

或者使用自定义 Web 组件：

<element-codeblock value=" .. "></element-codeblock>


<template id="element-codeblock-template">
  <style>
    pre {
      background-color: #f0f0f0;
      padding:  10px;
      border-radius:  5px;
      font-family: monospace;
    }
  </style>
  <pre><code><script style="display:block" type="text/plain">code</script></code></pre>
</template>
<script>
customElements.define('element-codeblock',
  class extends HTMLElement {
    connectedCallback() {
      const template = document.getElementById('element-codeblock-template');
      const templateContent = template.content;
      const node = templateContent.cloneNode(true);
      const scriptTag = node.querySelector('script[type="text/plain"]');
      scriptTag.textContent = this.getAttribute('value');
      this.attachShadow({ mode: 'open' }).appendChild(node);
    }
  }
);
</script>