unwanted whitespace/indentation in playable editors (interactive examples)

[glmvc]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#type_selectors

What specific section or headline is this issue about?

the interactive examples (playable editors)

What information was incorrect, unhelpful, or incomplete?

not a big deal imho, but i wanted to bring this up a while ago because i've come across it a few times before (especially in the learning area) and today I've noticed it again...

the html files for the interactive examples/editors (iframes; rendered with the EmbedGHLiveSample macro) contain all whitespace from their original files.
as it is the case atm, this can be annoying when editing, since most of the time you will start with an indentation of 4 spaces on a newline.
and on lines where a default indentation would be appreciated/expected, there is almost never an indentation...

often there is also weird formatting in the interactive examples - i guess this is maybe the result of code formatting with prettier?

another point is the fact that rendered code blocks on mdn articles have a default indentation of 2 spaces.

see the following screenshots for understanding:

---

my question is if

• this can be ignored for current examples and should be implemented in a better way for future examples
• or if the current examples need to be revised and improved regarding the described issues
  • and if so, can this be done programmatically or does it have to be done manually file by file?

What did you expect to see?

-> helpful and consistent whitespace/indentation as it is commonly used in code editors

we should encourage readers, especially beginners, to be consistent with such things...

Do you have any supporting links, references, or citations?

you can find some interactive examples here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills

Do you have anything more you want to share?

the right repo might be css-examples, but I wasn't sure if the issue described affects other parts as well...

[OnkarRuikar]

The source file is not formatted.

To address this these auxiliary repositories need the same tooling implemented as mdn/content does. If we merge these repos in mdn/content it will be easy to maintain.

For now we can manually run Prettier on all the files periodically.

[glmvc]

Thanks for the input @OnkarRuikar
I saw your comment in the related discussion.

If there is an active plan and discussion to move the repo(s) to mdn/content and auto formatting by Prettier will solve this small problem, I guess it is okay to close this issue.

[OnkarRuikar]

I guess it is okay to close this issue.

We'll have to manually format the code before merging and enabling auto formattings anyway. So it's better to format the code sooner. I've created a PR to fix this issue in all the files.

[glmvc]

@OnkarRuikar Alright, thanks for the PR!