Issue with code formating in the documentation

[MartinDelille]

Description

I noticed an issue in the code example in the documentation:

(link: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene)

As you can see the code if not properly formatted like in the corresponding code: https://github.com/mrdoob/three.js/blob/dev/docs/manual/en/introduction/Creating-a-scene.html#L26-L35

I sent a specific link but it happens all over the website.

Reproduction steps

Just go to the documentation and look at a code example.

Code

N/A

Live example

• jsfiddle-latest-release WebGLRenderer
• jsfiddle-dev WebGLRenderer
• jsfiddle-latest-release WebGPURenderer
• jsfiddle-dev WebGPURenderer

Screenshots

No response

Version

r171

Device

Desktop

Browser

Firefox

OS

MacOS

[Mugen87]

We had a similar issue lately, see #29569. We actually fixed the issue by updating prettify.js but it seems it happens again in Firefox.

[mrxz]

Able to reproduce the issue, happens quite consistently when loading a page with cache disabled (or after clearing cache/hard reloading).

Took a while to figure out what is causing it, but prettify.js determines if a <code> element is preformatted based on its computed style (prettify.js#L1650-L1659). However, under Firefox the computed style is empty when the iframe has display: none, which is the case while the inner page is still loading some resources. This behaviour seems to actually be what the CSSWG agreed upon, but it appears only Firefox behaves this way (https://bugzilla.mozilla.org/show_bug.cgi?id=1471231)

The pretty printing could be delayed, but that's not ideal since besides this there really isn't any reason to delay it. We know that the (non inline) code blocks are pre-formatted and only have to "tell" prettify.js this, but there doesn't seem to be a way to do this without making the changes to prettify.js directly.

[MartinDelille]

Thanks for you detailed answer! I'll watch the documentation in another browser if it bother me.

[Mugen87]

The pretty printing could be delayed, but that's not ideal since besides this there really isn't any reason to delay it.

How about we do that just for Firefox? Modifying prettify.js is something that I would like to avoid if possible.

[mrxz]

How about we do that just for Firefox? Modifying prettify.js is something that I would like to avoid if possible.

I have found an easier workaround. Before calling getComputedStyle, prettify first checks if currentStyle is set on the elements. This is originally for old IE versions, but can be used in our case to "tell" prettify.js that the code block elements are preformatted.

See #30036

[MartinDelille]

I unfortunately always have the issue.