diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html index 65024c22d..4c641a074 100644 --- a/website/pages/playground/index.html +++ b/website/pages/playground/index.html @@ -27,7 +27,7 @@ - + diff --git a/website/static/playground.js b/website/static/playground.js index f611e79a5..a8b4fa685 100644 --- a/website/static/playground.js +++ b/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 }; })();