fix(play-console): preserve whitespace

[OnkarRuikar]

• fix Interactive example collapses whitespace in output #668

Description

The output lines are displayed only in <code> blocks, so the HTML rendering is collapsing the whitespaces. As the content is only the text log strings, using only inline <pre> blocks solves the problem.

Additional details

Code used to test:

const greeting = "   ad   a       bd  a   ";
console.log(greeting);
console.log(greeting);

Before fix

After fix

Related issues and pull requests

Fixes #668

[caugner]

The change causes long lines to no longer break:

Where	Screenshot
Local
Prod

Maybe we should use neither code nor pre, and just set white-space: preserve?

[OnkarRuikar]

Just white-space: preserve isn't cutting it. The > and ####... are getting rendered on different lines.
We need <li> to not wrap and the text content to wrap. Let me know how the latest commit fares:

Code used

console.log("   abcd  d   c  ");
console.log("   abcd  \nd   c  ");
console.log("a".repeat(300));

[caugner]

Let's use a fixed width for the line indicator, and reuse that width for calculating the code with.

[github-actions]

bf48e08 was deployed to: https://fred-pr674.review.mdn.allizom.net/