Make site into an editable playground with monaco editor

[alejandrogarciasalas]

This PR makes the site into an editable playground.

Side Editor

Multiple Themes

The editor I am using is monaco the same editor used in VSCode wink wink.

Unfortunately since we are not using webpack or any bundler I had to copy paste the minified monaco files into the repo which makes this PR a little hard to read. I can probably break this PR into smaller chunks if necessary. Other than that the new JS, CSS should not be that hard to follow. Most of the logic is contained in the JS. I also, had to refactor div containers a little bit so that the side panel for editor was easier to implement.

Also, one thing to note is that only edits inside the div containing the playground-editable-area id will have any effect. If I allowed any code to be editable this would be too meta and would re-render everything on any edit. The playground-editable-area id can be moved to a different div though. Ideally any code outside of this area would be displayed but not be editable (perhaps with a muted style) but monaco makes it a little tricky to do this since you can only apply styling to specific line ranges which could break if the html code changes. I guess in this case done is better than perfect 🤷‍♂️ . I might revisit this later..

I did this mostly just for fun, let me know if there's any questions or feedback on the code and I'll try to address it.

[msftclas]

All CLA requirements met.

[dvdsgl]

You evil genius.