`code` tag should keep whitespace

[8ctopus]

Describe the issue

The code tag does not respect whitespace.

<code>
[
    {
        "id": "PROD-7LE34802UJ0769203",
        "name": "test product",
        "description": "test description",
        "create_time": "2023-10-11T11:46:02Z"
    }
]
</code>

Expected Behavior

Respect whitespace so that the code is nicely formatted.

Reproduction URL

https://codepen.io/8ct8pus/pen/wvbGLYO

Environment

Windows 10 Pro, Edge Version 125.0.2535.51 (Official build) (64-bit)

[8ctopus]

on a side note, it would be good to add it to the doc as well

[shuuji3]

How about using the standard <pre> block element, instead of <code> inline element, for multiple lines of code block?

ref. https://developer.mozilla.org/docs/Web/HTML/Element/pre

[stuartmaxwell]

Yes, @shuuji3 is correct. <pre> is the correct element to use if you want to preserve whitespace. You can either replace the code element with a pre element, or if you need to use code for some reason, you can wrap your code element with a pre element.

Option 1:

<pre>
[
    {
        "id": "PROD-7LE34802UJ0769203",
        "name": "test product",
        "description": "test description",
        "create_time": "2023-10-11T11:46:02Z"
    }
]
</pre>

Option 2:

<pre><code>
[
    {
        "id": "PROD-7LE34802UJ0769203",
        "name": "test product",
        "description": "test description",
        "create_time": "2023-10-11T11:46:02Z"
    }
]
</code></pre>

Note that the pre element will retain all whitespace, including the line breaks before and after the pre tags. So you would probably want to use the following to remove the starting and ending line breaks:

<pre>[
    {
        "id": "PROD-7LE34802UJ0769203",
        "name": "test product",
        "description": "test description",
        "create_time": "2023-10-11T11:46:02Z"
    }
]</pre>

[8ctopus]

@shuuji3 @stuartmaxwell Thank you guys for your feedback and I apologize for my ignorance.