Question

我有一个HTML页面，我需要显示一些日志消息。我把它们包装在<pre></pre>中，但它似乎将日志消息解释为HTML，我希望它以原始方式打印它。我尝试了在＃34; Displaying raw text in HTML like a text editor＆＃34;或＆＃34; Prevent automatic line breaks in a <code> tag＆＃34;或者＆＃34; How can I use CSS to preserve line breaks in an HTML <code> block?＆＃34;，但都没有效果（它们的结果与原始HTML相同。

这是我的HTML页面：

＆＃13;

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

＆＃13;

<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>

＆＃13;

以下是它在浏览器上呈现的内容（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

很抱歉我误解了这个问题。请将<hashie::替换为&#60hashie::

Answer 3

尝试替换＆lt;＆gt; （标签）与他们的HTML代码。例如：

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

Answer 4

您可以将要显示原始部分包装在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'

您可以替换'＆lt;'而不是包装在xmp标签中使用＆amp; lt和replace'＆gt;'与＆amp; gt

HTML显示原始文本

4 个答案: