Extract playground samples from mdoc, add possiblity to run them from source

website/playground/new-samples/creating-the-editor/editor-basic-options/sample.html

@@ -0,0 +1 @@
+<div id="container" style="height:100%;"></div>

website/playground/new-samples/creating-the-editor/editor-basic-options/sample.js

@@ -0,0 +1,19 @@
+// Through the options literal, the behaviour of the editor can be easily customized.
+// Here are a few examples of config options that can be passed to the editor.
+// You can also call editor.updateOptions at any time to change the options.
+
+var editor = monaco.editor.create(document.getElementById("container"), {
+	value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
+	language: "javascript",
+
+	lineNumbers: false,
+	roundedSelection: false,
+	scrollBeyondLastLine: false,
+	readOnly: false,
+	theme: "vs-dark",
+});
+setTimeout(function() {
+	editor.updateOptions({
+		lineNumbers: true
+	});
+}, 2000);

website/playground/new-samples/creating-the-editor/hard-wrapping/sample.html

@@ -0,0 +1 @@
+<div id="container" style="height:100%;"></div>

website/playground/new-samples/creating-the-editor/hello-world/sample.html

@@ -0,0 +1 @@
+<div id="container" style="height:100%;"></div>

website/playground/new-samples/creating-the-editor/hello-world/sample.js

@@ -0,0 +1,9 @@
+// The Monaco Editor can be easily created, given an
+// empty container and an options literal.
+// Two members of the literal are "value" and "language".
+// The editor takes the full size of its container.
+
+monaco.editor.create(document.getElementById("container"), {
+	value: "function hello() {\n\talert('Hello world!');\n}",
+	language: "javascript"
+});

website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.css

@@ -0,0 +1 @@
+

website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.html

@@ -0,0 +1,35 @@
+<pre id="code" data-lang="text/css" style="width:500px;">
+/* Some example CSS */
+
+@import url("something.css");
+
+body {
+  margin: 0;
+  padding: 3em 6em;
+  font-family: tahoma, arial, sans-serif;
+  color: #000;
+}
+
+#navigation a {
+  font-weight: bold;
+  text-decoration: none !important;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 1.7em;
+}
+
+h1:before, h2:before {
+  content: "some contents";
+}
+
+code {
+  font-family: courier, monospace;
+  font-size: 80%;
+  color: #418A8A;
+}
+</pre>

website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.js

@@ -0,0 +1,4 @@
+// The colorizeElement-function will read the data-lang-attribute
+// from the element to select the correct language mode. In this
+// sample it is text/css.
+monaco.editor.colorizeElement(document.getElementById('code'));