html - Display new line in code tag

Question

I'm trying to display code but everything is showed in one line. How can I display multiline code tag?

This is my code:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<title>Documentación: Events</title>
<body>
<code>
    {
    "id_tabla":3,
    "fecha":"02-09-2015",
    "privacidad":0,
    "timediff_m": "00"
    }
</code>
</body>

And this is how is showed in browser:

{"id_tabla":3,"fecha":"02-09-2015","privacidad":0,"timediff_m": "00"}

Edit

I can only use <code> tag

You could use the `
` tag instead. [See this question for more information](https://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets). — sdgluck, Sep 13 '15 at 13:51

score 58 · Accepted Answer · edited May 23 '17 at 12:02

58

This has already been answered here:

code {
  display: block;
  white-space: pre-wrap   
}

<code>
    {
    "id_tabla":3,
    "fecha":"02-09-2015",
    "privacidad":0,
    "timediff_m": "00"
    }
</code>

edited May 23 '17 at 12:02

Community

1
1

answered Sep 13 '15 at 13:57

Avalanche

1,468
1
11
18

Lipis · Answer 2 · 2015-09-13T13:55:51.860

56

Use <pre> instead of <code>.

<pre>
  {
    "id_tabla": 3,
    "fecha": "02-09-2015",
    "privacidad": 0,
    "timediff_m": "00"
  }
</pre>

You should use <code> if you want to have something inline and <pre> when you need something multiline.

edited Sep 13 '15 at 13:55

answered Sep 13 '15 at 13:52

Lipis

21,388
20
94
121

"The

 tag defines preformatted text... Text in a  element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks." This means you can apply different CSS to each.

– Honest Objections Mar 07 '18 at 01:37

html - Display new line in code tag

Edit

2 Answers2