55

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

1

3 Answers 3

61

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>

60

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.

1
  • "The <pre> tag defines preformatted text... Text in a <pre> 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. Commented Mar 7, 2018 at 1:37
0

You can use <code> with some CSS

<code style="display: block; white-space: pre-wrap;">
    {
    "id_tabla":3,
    "fecha":"02-09-2015",
    "privacidad":0,
    "timediff_m": "00"
    }
</code>

Or use

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

Keep in mind <pre> modifies whitespace processing and all spaces are preserved, and wrapping is switched off. So you might have to use <code> with the CSS style.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.