mdn: adapt for MDN Playground

[myfreeer]

Link: https://developer.mozilla.org/en-US/blog/introducing-the-mdn-playground/

The playground contains 2 parts, one is https://developer.mozilla.org/en-US/play, which is a standalone page with features listed below:

• html/js/css code input with real-time highlighting
• code format with maybe prettier
• click to run code inside an iframe using postMessage
• share with markdown without escaping code
• share on server-side (should be completely removed here)

The other part is embedding inside pages using EmbedLiveSample macro like this, the structure looks like this:

main#content > article.main-page-content > section

The other structure looks like this:

Or a hidden one looks like this:

All these stuff make us confused, they make it really hard to connect code to the iframe, maybe we should just reuse the algorithm of from yari
It could be much better that we could process this at download time in node.js, make the inject code much simpler.

[myfreeer]

Since url search params are all cleaned, we should find and save id params for iframes elsewhere in pre-process, and recover it in post-process.
Also note all playground runners are exactly the same code.

[myfreeer]

The *.mdnplay.dev host should be kept for download and process.

[myfreeer]

See also code here

[myfreeer]

Another thing to do is resources inside playground code, css and html. Note that it's almost impossible to process resources inside js code without indroducing a js engine or ast walking stuff, so it's non-goal for now.
Link: https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/