Format all code

[OnkarRuikar]

• Fixes unwanted whitespace/indentation in playable editors (interactive examples) content#28174

The code hasn't been formatted ever and redundant white spaces are rampant. Also in learning area examples the code formatting is not the same as rest of the content.

The PR:

• Runs Prettier on the code with mdn/content settings.
• Formats playable-css and playable-html text blocks. They are formatted separately because of leading white spaces which we don't want in editable boxes.

[chrisdavidmills]

LGTM; thanks @OnkarRuikar

[chrisdavidmills]

Ah, damnit, I can't merge this.

[caugner]

@OnkarRuikar Can you share how you ran prettier here with mdn/content settings and how you formatted those playable text blocks?

[OnkarRuikar]

@OnkarRuikar Can you share how you ran prettier here with mdn/content settings and how you formatted those playable text blocks?

As this was one time formatting I used non standard ways. :p

For formatting I kept mdn/content as pwd and ran prettier from there and pointed to css-examples files using relative path. It was something like following:

cd mdn/content
mdn/content$ prettier --write "../css-examples/**/*"

Prettier doesn't format content inside <textarea> tag. For that I used regex search replace in IDE. Regexes were anchored on <textarea class="playable playable-. Used separate regexes for CSS and HTML blocks. For corner cases manually added spaces as it's easy and quicker to directly edit in diff view of IDE.

---

For long term solution it is better to setup prettier in this repo.
For playable blocks there are two options:

• a) write custom formatter which will extract code inside <textarea> blocks and format using Prettier at commit time.
• b) update platform code to remove preceding spaces and format code at build/run time.