Set playground Codemirror mode based on parser

website/pages/playground/index.html

@@ -27,7 +27,7 @@
   <script src="/playground.js"></script>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/mode/loadmode.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/rulers.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/search/searchcursor.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/matchbrackets.js"></script>

website/static/playground.js

@@ -116,6 +116,12 @@ window.onload = function() {
   function formatAsync() {
     var options = getOptions();
 
+    var mode = util.getCodemirrorMode(options);
+    inputEditor.setOption("mode", mode);
+    outputEditor.setOption("mode", mode);
+    CodeMirror.autoLoadMode(inputEditor, mode);
+    CodeMirror.autoLoadMode(outputEditor, mode);
+
     outputEditor.setOption("rulers", [
       { column: options.printWidth, color: "#444444" }
     ]);
@@ -166,6 +172,9 @@ window.onload = function() {
     }, 2000);
   }
 
+  CodeMirror.modeURL =
+    "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/%N/%N.js";
+
   var editorOptions = {
     lineNumbers: true,
     keyMap: "sublime",
@@ -257,6 +266,15 @@ var util = (function() {
     }
   }
 
+  function getCodemirrorMode(options) {
+    switch (options.parser) {
+      case "postcss":
+        return "css";
+      default:
+        return "javascript";
+    }
+  }
+
   function formatCLIOptions(cliOptions) {
     return cliOptions
       .map(function(option) {
@@ -282,6 +300,7 @@ var util = (function() {
 
   return {
     formatMarkdown: formatMarkdown,
-    getMarkdownSyntax: getMarkdownSyntax
+    getMarkdownSyntax: getMarkdownSyntax,
+    getCodemirrorMode: getCodemirrorMode
   };
 })();