HTML display raw text

Question

I have an HTML page where I need to display some log messages. I had them wrapped in <pre></pre>, but it seems to be interpreting the log messages as HTML, I want it to print it raw. I tried suggestions given in "Displaying raw text in HTML like a text editor" or "Prevent automatic line breaks in a <code> tag" or "How can I use CSS to preserve line breaks in an HTML <code> block?", but none work (they give same result as my original HTML.

Here is my HTML page:

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>

Here is what it renders on browser (latest Chrome in Mac):

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

NOTE the missing hashie::mash

What I want it to print is:

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

I run into similar problems when the log contains some XML.

Possible duplicate of [Display HTML code in HTML](http://stackoverflow.com/questions/2820453/display-html-code-in-html) — Asons, Jun 24 '16 at 19:21

rafaelcastrocouto · Accepted Answer · 2018-03-26T12:21:33.903

5

Easiest way I know: use a <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>

edited Mar 26 '18 at 12:21

answered Jun 24 '16 at 18:37

rafaelcastrocouto

11,781
3
38
63

1

I was unable to make it NOT wrap (tried `wrap="soft"`, `overflow:scroll`). But otherwise the easiest soln indeed. – Kashyap Jun 24 '16 at 23:46
I updated the answer to NOT wrap with the css code: `white-space: nowrap;` – rafaelcastrocouto Mar 26 '18 at 12:22

hgstuffinx · Answer 2 · 2016-06-24T18:51:54.387

3

You can wrap the section you want to display raw in xmp tags.

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

As others have pointed out, xmp is deprecated. This would be better:

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

Rather than wrapping in xmp tags, you could replace '<' with &lt and replace '>' with &gt

edited Jun 24 '16 at 18:51

answered Jun 24 '16 at 18:33

hgstuffinx

33
5

2

The `xmp` tag is deprecated and does not work in all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp – Asons Jun 24 '16 at 18:38
For the question at hand, I believe this is probably the best answer, deprecated or not, good solution +1 – Adam Buchanan Smith Jun 24 '16 at 18:41
1

` – Daryn Sep 30 '19 at 09:17

score 1 · Answer 3 · edited Jun 24 '16 at 18:42

1

Sorry for my misunderstanding the question. Please replace <hashie:: with &#60hashie::

edited Jun 24 '16 at 18:42

Adam Buchanan Smith

9,422
5
19
39

answered Jun 24 '16 at 18:25

shobhit jain

141
1
9

score 1 · Answer 4 · answered Jun 24 '16 at 18:33

1

Try replacing <> (tags) with their html codes. example:

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

answered Jun 24 '16 at 18:33

Rahul Malu

556
2
9

HTML display raw text

4 Answers4