[Add Language] Marko (#3519)

* add marko

* update marko

samples/Marko/counter.marko

@@ -0,0 +1,26 @@
+class {
+    constructor() {
+        this.state = { count:0 };
+    }
+    increment() {
+        this.state.count++;
+    }
+}
+
+style {
+    .count {
+        color:#09c;
+        font-size:3em;
+    }
+    .example-button {
+        font-size:1em;
+        padding:0.5em;
+    }
+}
+
+<div.count>
+    ${state.count}
+</div>
+<button.example-button on-click('increment')>
+    Click me!
+</button>

samples/Marko/hello.marko

@@ -0,0 +1,15 @@
+$ var name = 'Frank';
+$ var colors = ['red', 'green', 'blue'];
+
+<h1>
+    Hello ${name}!
+</h1>
+
+<ul if(colors.length)>
+    <li style={color: color} for(color in colors)>
+        ${color}
+    </li>
+</ul>
+<div else>
+    No colors!
+</div>

samples/Marko/rgb-sliders.marko

@@ -0,0 +1,36 @@
+static const colors = ['red', 'green', 'blue'];
+static const defaultColor = [255, 0, 0];
+
+class {
+	onInput(input) {
+		this.state = { color: input.color || defaultColor };
+	}
+
+	updateColor() {
+    	this.state.color = colors.map((color) => {
+        	return parseInt(this.getEl(color + 'Input').value, 10);
+        });
+    }
+
+    getStyleColor() {
+    	return 'rgb(' + this.state.color.join(',') + ')';
+    }
+}
+
+<div.rgb-sliders>
+    <div.inputs>
+    	<for(i, color in colors)>
+        	<div>
+                <label for-key=color+"Input">
+                    ${color}:
+                </label>
+                <input type="range" max="255"
+                    key=color+"Input"
+                    on-input('updateColor')
+                    value=state.color[i] >
+            </div>
+        </for>
+    </div>
+    <div.color style={backgroundColor: component.getStyleColor()}>
+    </div>
+</div>