Repository navigation
Assembler CSS Play? #8
Description
Activity
Update
I made an Assembler CSS play! Here's the code!
Code editor.zip
Reacted by Marius SarcaWe are currently in crunch mode, preparing a mega-update for Expressive Animator, but once that update is live, we can consider developing something similar to Tailwind Play.
PS. I've downloaded the zip file, but it seems to be empty.
We are currently in crunch mode, preparing a mega-update for Expressive Animator, but once that update is live, we can consider developing something similar to Tailwind Play.
PS. I've downloaded the zip file, but it seems to be empty.
Weird, I'll just paste the code then:
HTML code (index.html)
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prettier/2.3.2/standalone.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prettier/2.3.2/parser-babel.min.js"></script> <meta charset="utf-8" /> <title>monaco editor</title> <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css" /> <style> @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"); </style> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="editors"> <div class="editor"> <h2 id="editor_title">HTML</h2> <div id="html"></div> </div> <div class="editor"> <h2 id="editor_title">CSS</h2> <div id="css"></div> </div> </div> <div id="loading"><button></button><span>Loading</span></div> <iframe frameborder="0" id="preview"></iframe> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js"></script> <script src="https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js"></script> <script src="script.js" type="module" defer></script> </body> </html>
CSS code
:root { --font: "Montserrat", sans-serif; } * { padding: 0; margin: 0; box-sizing: border-box; } body { display: flex; width: 100vw; height: 100vh; background: #0b2c44; } .editors { flex: 1; } .editors .editor { height: 50%; display: flex; flex-direction: column; } #editor_title { font-family: var(--font); padding: 3px 10px; color: white; } #html, #css, #js, #javascript { flex: 1; position: relative; } iframe { flex: 1.5; background: white; } #editor_title { font-size: 1.2rem; z-index: 1000; background: linear-gradient(to right, #1c5684, #361c84); opacity: 0.6; transition: opacity 0.3s ease; border-radius: 4px; } .editors .editor:is(:hover, :focus, :focus-within) #editor_title { opacity: 1; } .editors { border-right: 4px solid #361c84; } html { overflow: hidden; } #loading button { height: 15px; width: 15px; background: rgba(0, 0, 0, 0); border-radius: 50%; border-top: 4px solid #5a9fd7; border-right: 2px solid transparent; border-bottom: none; border-left: none; position: absolute; left: 10px; animation: spinner5 400ms linear infinite; } #loading span { position: absolute; left: 35px; color: white; font-family: var(--font); } #loading { width: 60%; position: absolute; z-index: 1000; background: #361c84; right: 0; bottom: 0; height: 5%; display: flex; align-items: center; transition: opacity 0.3s ease; } #loading { opacity: 0; pointer-events: none; } #loading.shown { opacity: 1; pointer-events: auto; } @keyframes spinner5 { to { transform: rotate(360deg); } }
JS code (script.js, run as module)
import * as _$ from "https://unpkg.com/bijou.js"; import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs"; import parserHTML from "https://unpkg.com/prettier@2.3.2/esm/parser-html.mjs"; import parserCSS from "https://unpkg.com/prettier@2.3.2/esm/parser-postcss.mjs"; var editors = []; const options = { cursorSmoothCaretAnimation: true, dragAndDrop: true, fontLigatures: true, fontFamily: "Fira Code", cursorBlinking: "smooth", smoothScrolling: true, renderWhitespace: "selection", minimap: { enabled: false }, multiCursorModifier: "ctrlCmd", copyWithSyntaxHighlighting: true, formatOnType: true, formatOnPaste: true, scrollBeyondLastLine: false, automaticLayout: true }; function init() { return new Promise((res) => { require.config({ paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs" } }); window.MonacoEnvironment = { getWorkerUrl: () => proxy }; let proxy = URL.createObjectURL( new Blob( [ ` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/base/worker/workerMain.min.js'); ` ], { type: "text/javascript" } ) ); require(["vs/editor/editor.main"], editorContext); }); } init(); async function editorContext() { var data = await fetch("theme.json").then((res) => res.json()); monaco.editor.defineTheme("custom", data); monaco.editor.setTheme("custom"); create({ language: "html", selector: "#html", value: "" }); create({ language: "css", selector: "#css", value: "" }); (() => { editors[0].addCommand( monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B, function () { const value = editors[0].getValue(); console.log("Beautifying"); console.log("Cursor position is:"); var position = editors[0].getPosition(); console.log(position); console.log("Cursor index is:"); var model = monaco.editor.createModel(value); var index = model.getOffsetAt(position); console.log(index); var val = prettier.formatWithCursor(value, { cursorOffset: index, plugins: [parserHTML], parser: "html" }); editors[0].setValue(val.formatted); var newModel = monaco.editor.createModel(val.formatted); var newIndex = model.getPositionAt(val.cursorOffset); console.log({ newModel, newIndex }); editors[0].setPosition(newIndex); } ); editors[1].addCommand( monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B, function () { const value = editors[1].getValue(); console.log("Beautifying"); console.log("Cursor position is:"); var position = editors[1].getPosition(); console.log(position); console.log("Cursor index is:"); var model = monaco.editor.createModel(value); var index = model.getOffsetAt(position); console.log(index); var val = prettier.formatWithCursor(value, { cursorOffset: index, parser: "css", plugins: [parserCSS] }); editors[1].setValue(val.formatted); var newModel = monaco.editor.createModel(val.formatted); var newIndex = model.getPositionAt(val.cursorOffset); console.log({ newModel, newIndex }); editors[1].setPosition(newIndex); } ); editors.forEach((editor) => { editor.getModel().onDidChangeContent(_$.debounce(update, 500)); }); })(); async function getEditorContent() { var content = await fetch("content.json").then((res) => res.json()); localforage .getItem("values") .then((res) => { if (res == null) { localforage.setItem("values", [content.html, content.css]); return getEditorContent(); } res.forEach((val, idx) => editors[idx].setValue(val)); console.log("Updating"); update(); }) .catch(); } getEditorContent(); function create({ value = "", language, selector }) { let editor = monaco.editor.create(document.querySelector(selector), { value: value, language: language, theme: "custom", ...options }); editors.push(editor); } } // window.onkeyup = _$.debounce(update, 500); async function update() { startLoading(); const values = [editors[0].getValue(), editors[1].getValue()]; localforage.setItem("values", values); const color_pallette = (await fetch("content.json").then((res) => res.json())) .pallette; let html = ` <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/@asmcss/assembler/dist/assembler.min.js"></script> </head> <body> ${editors[0].getValue()} </body> </html> <style> ${editors[1].getValue()} </style> <style> ${color_pallette} </style> <script> console = { log: (...data) => send({type: 'log', data: data}), warn: (...data) => send({type: 'warn', data: data}), error: (...data) => send({type: 'error', data: data}), info: (...data) => send({type: 'info', data: data}) } function send(message){ //var parent = window.parent; // parent.postMessage({from: "iframe_msg", message}); } </script> `; let ifr = document.querySelector("iframe"); ifr.onload = () => setTimeout(stopLoading, 500); ifr.src = "data:text/html," + encodeURIComponent(html); } function startLoading() { document.querySelector("#loading").classList.add("shown"); } function stopLoading() { document.querySelector("#loading").classList.remove("shown"); } window.addEventListener("message", ({ data }) => { if (data.from !== "iframe_msg") return; const message = data.message; console.log(`Got message:`, message); });
content.json (Used for default code when the user loads the page for the 1st time)
{ "pallette": ":root {\r\n --red-50: #ffebee;\r\n --red-100: #ffcdd2;\r\n --red-200: #ef9a9a;\r\n --red-300: #e57373;\r\n --red-400: #ef5350;\r\n --red-500: #f44336;\r\n --red-600: #e53935;\r\n --red-700: #d32f2f;\r\n --red-800: #c62828;\r\n --red-900: #b71c1c;\r\n --red-a100: #ff8a80;\r\n --red-a200: #ff5252;\r\n --red-a400: #ff1744;\r\n --red-a700: #d50000;\r\n --red: var(--red-500);\r\n\r\n --pink-50: #fce4ec;\r\n --pink-100: #f8bbd0;\r\n --pink-200: #f48fb1;\r\n --pink-300: #f06292;\r\n --pink-400: #ec407a;\r\n --pink-500: #e91e63;\r\n --pink-600: #d81b60;\r\n --pink-700: #c2185b;\r\n --pink-800: #ad1457;\r\n --pink-900: #880e4f;\r\n --pink-a100: #ff80ab;\r\n --pink-a200: #ff4081;\r\n --pink-a400: #f50057;\r\n --pink-a700: #c51162;\r\n --pink: var(--pink-500);\r\n\r\n --purple-50: #f3e5f5;\r\n --purple-100: #e1bee7;\r\n --purple-200: #ce93d8;\r\n --purple-300: #ba68c8;\r\n --purple-400: #ab47bc;\r\n --purple-500: #9c27b0;\r\n --purple-600: #8e24aa;\r\n --purple-700: #7b1fa2;\r\n --purple-800: #6a1b9a;\r\n --purple-900: #4a148c;\r\n --purple-a100: #ea80fc;\r\n --purple-a200: #e040fb;\r\n --purple-a400: #d500f9;\r\n --purple-a700: #a0f;\r\n --purple: var(--purple-500);\r\n\r\n --deep-purple-50: #ede7f6;\r\n --deep-purple-100: #d1c4e9;\r\n --deep-purple-200: #b39ddb;\r\n --deep-purple-300: #9575cd;\r\n --deep-purple-400: #7e57c2;\r\n --deep-purple-500: #673ab7;\r\n --deep-purple-600: #5e35b1;\r\n --deep-purple-700: #512da8;\r\n --deep-purple-800: #4527a0;\r\n --deep-purple-900: #311b92;\r\n --deep-purple-a100: #b388ff;\r\n --deep-purple-a200: #7c4dff;\r\n --deep-purple-a400: #651fff;\r\n --deep-purple-a700: #6200ea;\r\n --deep-purple: var(--deep-purple-500);\r\n\r\n --indigo-50: #e8eaf6;\r\n --indigo-100: #c5cae9;\r\n --indigo-200: #9fa8da;\r\n --indigo-300: #7986cb;\r\n --indigo-400: #5c6bc0;\r\n --indigo-500: #3f51b5;\r\n --indigo-600: #3949ab;\r\n --indigo-700: #303f9f;\r\n --indigo-800: #283593;\r\n --indigo-900: #1a237e;\r\n --indigo-a100: #8c9eff;\r\n --indigo-a200: #536dfe;\r\n --indigo-a400: #3d5afe;\r\n --indigo-a700: #304ffe;\r\n --indigo: var(--indigo-500);\r\n\r\n --blue-50: #e3f2fd;\r\n --blue-100: #bbdefb;\r\n --blue-200: #90caf9;\r\n --blue-300: #64b5f6;\r\n --blue-400: #42a5f5;\r\n --blue-500: #2196f3;\r\n --blue-600: #1e88e5;\r\n --blue-700: #1976d2;\r\n --blue-800: #1565c0;\r\n --blue-900: #0d47a1;\r\n --blue-a100: #82b1ff;\r\n --blue-a200: #448aff;\r\n --blue-a400: #2979ff;\r\n --blue-a700: #2962ff;\r\n --blue: var(--blue-500);\r\n\r\n --light-blue-50: #e1f5fe;\r\n --light-blue-100: #b3e5fc;\r\n --light-blue-200: #81d4fa;\r\n --light-blue-300: #4fc3f7;\r\n --light-blue-400: #29b6f6;\r\n --light-blue-500: #03a9f4;\r\n --light-blue-600: #039be5;\r\n --light-blue-700: #0288d1;\r\n --light-blue-800: #0277bd;\r\n --light-blue-900: #01579b;\r\n --light-blue-a100: #80d8ff;\r\n --light-blue-a200: #40c4ff;\r\n --light-blue-a400: #00b0ff;\r\n --light-blue-a700: #0091ea;\r\n --light-blue: var(--light-blue-500);\r\n\r\n --cyan-50: #e0f7fa;\r\n --cyan-100: #b2ebf2;\r\n --cyan-200: #80deea;\r\n --cyan-300: #4dd0e1;\r\n --cyan-400: #26c6da;\r\n --cyan-500: #00bcd4;\r\n --cyan-600: #00acc1;\r\n --cyan-700: #0097a7;\r\n --cyan-800: #00838f;\r\n --cyan-900: #006064;\r\n --cyan-a100: #84ffff;\r\n --cyan-a200: #18ffff;\r\n --cyan-a400: #00e5ff;\r\n --cyan-a700: #00b8d4;\r\n --cyan: var(--cyan-500);\r\n\r\n --teal-50: #e0f2f1;\r\n --teal-100: #b2dfdb;\r\n --teal-200: #80cbc4;\r\n --teal-300: #4db6ac;\r\n --teal-400: #26a69a;\r\n --teal-500: #009688;\r\n --teal-600: #00897b;\r\n --teal-700: #00796b;\r\n --teal-800: #00695c;\r\n --teal-900: #004d40;\r\n --teal-a100: #a7ffeb;\r\n --teal-a200: #64ffda;\r\n --teal-a400: #1de9b6;\r\n --teal-a700: #00bfa5;\r\n --teal: var(--teal-500);\r\n\r\n --green-50: #e8f5e9;\r\n --green-100: #c8e6c9;\r\n --green-200: #a5d6a7;\r\n --green-300: #81c784;\r\n --green-400: #66bb6a;\r\n --green-500: #4caf50;\r\n --green-600: #43a047;\r\n --green-700: #388e3c;\r\n --green-800: #2e7d32;\r\n --green-900: #1b5e20;\r\n --green-a100: #b9f6ca;\r\n --green-a200: #69f0ae;\r\n --green-a400: #00e676;\r\n --green-a700: #00c853;\r\n --green: var(--green-500);\r\n\r\n --light-green-50: #f1f8e9;\r\n --light-green-100: #dcedc8;\r\n --light-green-200: #c5e1a5;\r\n --light-green-300: #aed581;\r\n --light-green-400: #9ccc65;\r\n --light-green-500: #8bc34a;\r\n --light-green-600: #7cb342;\r\n --light-green-700: #689f38;\r\n --light-green-800: #558b2f;\r\n --light-green-900: #33691e;\r\n --light-green-a100: #ccff90;\r\n --light-green-a200: #b2ff59;\r\n --light-green-a400: #76ff03;\r\n --light-green-a700: #64dd17;\r\n --light-green: var(--light-green-500);\r\n\r\n --lime-50: #f9fbe7;\r\n --lime-100: #f0f4c3;\r\n --lime-200: #e6ee9c;\r\n --lime-300: #dce775;\r\n --lime-400: #d4e157;\r\n --lime-500: #cddc39;\r\n --lime-600: #c0ca33;\r\n --lime-700: #afb42b;\r\n --lime-800: #9e9d24;\r\n --lime-900: #827717;\r\n --lime-a100: #f4ff81;\r\n --lime-a200: #eeff41;\r\n --lime-a400: #c6ff00;\r\n --lime-a700: #aeea00;\r\n --lime: var(--lime-500);\r\n\r\n --yellow-50: #fffde7;\r\n --yellow-100: #fff9c4;\r\n --yellow-200: #fff59d;\r\n --yellow-300: #fff176;\r\n --yellow-400: #ffee58;\r\n --yellow-500: #ffeb3b;\r\n --yellow-600: #fdd835;\r\n --yellow-700: #fbc02d;\r\n --yellow-800: #f9a825;\r\n --yellow-900: #f57f17;\r\n --yellow-a100: #ffff8d;\r\n --yellow-a200: #ff0;\r\n --yellow-a400: #ffea00;\r\n --yellow-a700: #ffd600;\r\n --yellow: var(--yellow-500);\r\n\r\n --amber-50: #fff8e1;\r\n --amber-100: #ffecb3;\r\n --amber-200: #ffe082;\r\n --amber-300: #ffd54f;\r\n --amber-400: #ffca28;\r\n --amber-500: #ffc107;\r\n --amber-600: #ffb300;\r\n --amber-700: #ffa000;\r\n --amber-800: #ff8f00;\r\n --amber-900: #ff6f00;\r\n --amber-a100: #ffe57f;\r\n --amber-a200: #ffd740;\r\n --amber-a400: #ffc400;\r\n --amber-a700: #ffab00;\r\n --amber: var(--amber-500);\r\n\r\n --orange-50: #fff3e0;\r\n --orange-100: #ffe0b2;\r\n --orange-200: #ffcc80;\r\n --orange-300: #ffb74d;\r\n --orange-400: #ffa726;\r\n --orange-500: #ff9800;\r\n --orange-600: #fb8c00;\r\n --orange-700: #f57c00;\r\n --orange-800: #ef6c00;\r\n --orange-900: #e65100;\r\n --orange-a100: #ffd180;\r\n --orange-a200: #ffab40;\r\n --orange-a400: #ff9100;\r\n --orange-a700: #ff6d00;\r\n --orange: var(--orange-500);\r\n\r\n --deep-orange-50: #fbe9e7;\r\n --deep-orange-100: #ffccbc;\r\n --deep-orange-200: #ffab91;\r\n --deep-orange-300: #ff8a65;\r\n --deep-orange-400: #ff7043;\r\n --deep-orange-500: #ff5722;\r\n --deep-orange-600: #f4511e;\r\n --deep-orange-700: #e64a19;\r\n --deep-orange-800: #d84315;\r\n --deep-orange-900: #bf360c;\r\n --deep-orange-a100: #ff9e80;\r\n --deep-orange-a200: #ff6e40;\r\n --deep-orange-a400: #ff3d00;\r\n --deep-orange-a700: #dd2c00;\r\n --deep-orange: var(--deep-orange-500);\r\n\r\n --brown-50: #efebe9;\r\n --brown-100: #d7ccc8;\r\n --brown-200: #bcaaa4;\r\n --brown-300: #a1887f;\r\n --brown-400: #8d6e63;\r\n --brown-500: #795548;\r\n --brown-600: #6d4c41;\r\n --brown-700: #5d4037;\r\n --brown-800: #4e342e;\r\n --brown-900: #3e2723;\r\n --brown: var(--brown-500);\r\n\r\n --grey-50: #fafafa;\r\n --grey-100: #f5f5f5;\r\n --grey-200: #eee;\r\n --grey-300: #e0e0e0;\r\n --grey-400: #bdbdbd;\r\n --grey-500: #9e9e9e;\r\n --grey-600: #757575;\r\n --grey-700: #616161;\r\n --grey-800: #424242;\r\n --grey-900: #212121;\r\n --grey: var(--grey-500);\r\n\r\n --blue-grey-50: #eceff1;\r\n --blue-grey-100: #cfd8dc;\r\n --blue-grey-200: #b0bec5;\r\n --blue-grey-300: #90a4ae;\r\n --blue-grey-400: #78909c;\r\n --blue-grey-500: #607d8b;\r\n --blue-grey-600: #546e7a;\r\n --blue-grey-700: #455a64;\r\n --blue-grey-800: #37474f;\r\n --blue-grey-900: #263238;\r\n --blue-grey: var(--blue-grey-500);\r\n}", "html": "<div x-style=\"grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3\">\r\n <button x-style=\"^button\">Submit</button>\r\n <button x-style=\"^button:red\">Submit</button>\r\n <button x-style=\"^button:blue\">Submit</button>\r\n <button x-style=\"^button:indigo; radius:pill\">Submit</button>\r\n <button x-style=\"^button:amber; color:black\">Submit</button>\r\n <button x-style=\"^button:indigo\" disabled>Submit</button>\r\n</div>", "css": ":root {\r\n --reset--mixin: \"appearance:none; outline:none; decoration:none\";\r\n --button-color--mixin: \"bg-color:@${0}-500; bg-color.hover:@${0}-600;\\\r\n bg-color.active:@${0}-700; bg-color.disabled:@${0}-500; \\\r\n ring.focus:4px @${0}-300\";\r\n\r\n --button--mixin: \"inline-flex; ^reset; ^button-color:${0=grey}; \\\r\n justify-content:center; align-items:center; \\\r\n cursor:pointer; cursor.disabled:not-allowed; py:4; px:6; \\\r\n opacity.disabled:50%; transition:all 0.25s; \\\r\n border; color:white; uppercase; radius\";\r\n}\r\n" }theme.json (The custom theme for monaco)
{ "base": "vs-dark", "inherit": true, "rules": [ { "background": "011627", "token": "" }, { "foreground": "637777", "token": "comment" }, { "foreground": "addb67", "token": "string" }, { "foreground": "ecc48d", "token": "vstring.quoted" }, { "foreground": "ecc48d", "token": "variable.other.readwrite.js" }, { "foreground": "5ca7e4", "token": "string.regexp" }, { "foreground": "5ca7e4", "token": "string.regexp keyword.other" }, { "foreground": "5f7e97", "token": "meta.function punctuation.separator.comma" }, { "foreground": "f78c6c", "token": "constant.numeric" }, { "foreground": "f78c6c", "token": "constant.character.numeric" }, { "foreground": "addb67", "token": "variable" }, { "foreground": "c792ea", "token": "keyword" }, { "foreground": "c792ea", "token": "punctuation.accessor" }, { "foreground": "c792ea", "token": "storage" }, { "foreground": "c792ea", "token": "meta.var.expr" }, { "foreground": "c792ea", "token": "meta.class meta.method.declaration meta.var.expr storage.type.jsm" }, { "foreground": "c792ea", "token": "storage.type.property.js" }, { "foreground": "c792ea", "token": "storage.type.property.ts" }, { "foreground": "c792ea", "token": "storage.type.property.tsx" }, { "foreground": "82aaff", "token": "storage.type" }, { "foreground": "ffcb8b", "token": "entity.name.class" }, { "foreground": "ffcb8b", "token": "meta.class entity.name.type.class" }, { "foreground": "addb67", "token": "entity.other.inherited-class" }, { "foreground": "82aaff", "token": "entity.name.function" }, { "foreground": "addb67", "token": "punctuation.definition.variable" }, { "foreground": "d3423e", "token": "punctuation.section.embedded" }, { "foreground": "d6deeb", "token": "punctuation.terminator.expression" }, { "foreground": "d6deeb", "token": "punctuation.definition.arguments" }, { "foreground": "d6deeb", "token": "punctuation.definition.array" }, { "foreground": "d6deeb", "token": "punctuation.section.array" }, { "foreground": "d6deeb", "token": "meta.array" }, { "foreground": "d9f5dd", "token": "punctuation.definition.list.begin" }, { "foreground": "d9f5dd", "token": "punctuation.definition.list.end" }, { "foreground": "d9f5dd", "token": "punctuation.separator.arguments" }, { "foreground": "d9f5dd", "token": "punctuation.definition.list" }, { "foreground": "d3423e", "token": "string.template meta.template.expression" }, { "foreground": "d6deeb", "token": "string.template punctuation.definition.string" }, { "foreground": "c792ea", "fontStyle": "italic", "token": "italic" }, { "foreground": "addb67", "fontStyle": "bold", "token": "bold" }, { "foreground": "82aaff", "token": "constant.language" }, { "foreground": "82aaff", "token": "punctuation.definition.constant" }, { "foreground": "82aaff", "token": "variable.other.constant" }, { "foreground": "7fdbca", "token": "support.function.construct" }, { "foreground": "7fdbca", "token": "keyword.other.new" }, { "foreground": "82aaff", "token": "constant.character" }, { "foreground": "82aaff", "token": "constant.other" }, { "foreground": "f78c6c", "token": "constant.character.escape" }, { "foreground": "addb67", "token": "entity.other.inherited-class" }, { "foreground": "d7dbe0", "token": "variable.parameter" }, { "foreground": "7fdbca", "token": "entity.name.tag" }, { "foreground": "cc2996", "token": "punctuation.definition.tag.html" }, { "foreground": "cc2996", "token": "punctuation.definition.tag.begin" }, { "foreground": "cc2996", "token": "punctuation.definition.tag.end" }, { "foreground": "addb67", "token": "entity.other.attribute-name" }, { "foreground": "addb67", "token": "entity.name.tag.custom" }, { "foreground": "82aaff", "token": "support.function" }, { "foreground": "82aaff", "token": "support.constant" }, { "foreground": "7fdbca", "token": "upport.constant.meta.property-value" }, { "foreground": "addb67", "token": "support.type" }, { "foreground": "addb67", "token": "support.class" }, { "foreground": "addb67", "token": "support.variable.dom" }, { "foreground": "7fdbca", "token": "support.constant" }, { "foreground": "7fdbca", "token": "keyword.other.special-method" }, { "foreground": "7fdbca", "token": "keyword.other.new" }, { "foreground": "7fdbca", "token": "keyword.other.debugger" }, { "foreground": "7fdbca", "token": "keyword.control" }, { "foreground": "c792ea", "token": "keyword.operator.comparison" }, { "foreground": "c792ea", "token": "keyword.control.flow.js" }, { "foreground": "c792ea", "token": "keyword.control.flow.ts" }, { "foreground": "c792ea", "token": "keyword.control.flow.tsx" }, { "foreground": "c792ea", "token": "keyword.control.ruby" }, { "foreground": "c792ea", "token": "keyword.control.module.ruby" }, { "foreground": "c792ea", "token": "keyword.control.class.ruby" }, { "foreground": "c792ea", "token": "keyword.control.def.ruby" }, { "foreground": "c792ea", "token": "keyword.control.loop.js" }, { "foreground": "c792ea", "token": "keyword.control.loop.ts" }, { "foreground": "c792ea", "token": "keyword.control.import.js" }, { "foreground": "c792ea", "token": "keyword.control.import.ts" }, { "foreground": "c792ea", "token": "keyword.control.import.tsx" }, { "foreground": "c792ea", "token": "keyword.control.from.js" }, { "foreground": "c792ea", "token": "keyword.control.from.ts" }, { "foreground": "c792ea", "token": "keyword.control.from.tsx" }, { "foreground": "ffffff", "background": "ff2c83", "token": "invalid" }, { "foreground": "ffffff", "background": "d3423e", "token": "invalid.deprecated" }, { "foreground": "7fdbca", "token": "keyword.operator" }, { "foreground": "c792ea", "token": "keyword.operator.relational" }, { "foreground": "c792ea", "token": "keyword.operator.assignement" }, { "foreground": "c792ea", "token": "keyword.operator.arithmetic" }, { "foreground": "c792ea", "token": "keyword.operator.bitwise" }, { "foreground": "c792ea", "token": "keyword.operator.increment" }, { "foreground": "c792ea", "token": "keyword.operator.ternary" }, { "foreground": "637777", "token": "comment.line.double-slash" }, { "foreground": "cdebf7", "token": "object" }, { "foreground": "ff5874", "token": "constant.language.null" }, { "foreground": "d6deeb", "token": "meta.brace" }, { "foreground": "c792ea", "token": "meta.delimiter.period" }, { "foreground": "d9f5dd", "token": "punctuation.definition.string" }, { "foreground": "ff5874", "token": "constant.language.boolean" }, { "foreground": "ffffff", "token": "object.comma" }, { "foreground": "7fdbca", "token": "variable.parameter.function" }, { "foreground": "80cbc4", "token": "support.type.vendor.property-name" }, { "foreground": "80cbc4", "token": "support.constant.vendor.property-value" }, { "foreground": "80cbc4", "token": "support.type.property-name" }, { "foreground": "80cbc4", "token": "meta.property-list entity.name.tag" }, { "foreground": "57eaf1", "token": "meta.property-list entity.name.tag.reference" }, { "foreground": "f78c6c", "token": "constant.other.color.rgb-value punctuation.definition.constant" }, { "foreground": "ffeb95", "token": "constant.other.color" }, { "foreground": "ffeb95", "token": "keyword.other.unit" }, { "foreground": "c792ea", "token": "meta.selector" }, { "foreground": "fad430", "token": "entity.other.attribute-name.id" }, { "foreground": "80cbc4", "token": "meta.property-name" }, { "foreground": "c792ea", "token": "entity.name.tag.doctype" }, { "foreground": "c792ea", "token": "meta.tag.sgml.doctype" }, { "foreground": "d9f5dd", "token": "punctuation.definition.parameters" }, { "foreground": "ecc48d", "token": "string.quoted" }, { "foreground": "ecc48d", "token": "string.quoted.double" }, { "foreground": "ecc48d", "token": "string.quoted.single" }, { "foreground": "addb67", "token": "support.constant.math" }, { "foreground": "addb67", "token": "support.type.property-name.json" }, { "foreground": "addb67", "token": "support.constant.json" }, { "foreground": "c789d6", "token": "meta.structure.dictionary.value.json string.quoted.double" }, { "foreground": "80cbc4", "token": "string.quoted.double.json punctuation.definition.string.json" }, { "foreground": "ff5874", "token": "meta.structure.dictionary.json meta.structure.dictionary.value constant.language" }, { "foreground": "d6deeb", "token": "variable.other.ruby" }, { "foreground": "ecc48d", "token": "entity.name.type.class.ruby" }, { "foreground": "ecc48d", "token": "keyword.control.class.ruby" }, { "foreground": "ecc48d", "token": "meta.class.ruby" }, { "foreground": "7fdbca", "token": "constant.language.symbol.hashkey.ruby" }, { "foreground": "e0eddd", "background": "a57706", "fontStyle": "italic", "token": "meta.diff" }, { "foreground": "e0eddd", "background": "a57706", "fontStyle": "italic", "token": "meta.diff.header" }, { "foreground": "ef535090", "fontStyle": "italic", "token": "markup.deleted" }, { "foreground": "a2bffc", "fontStyle": "italic", "token": "markup.changed" }, { "foreground": "a2bffc", "fontStyle": "italic", "token": "meta.diff.header.git" }, { "foreground": "a2bffc", "fontStyle": "italic", "token": "meta.diff.header.from-file" }, { "foreground": "a2bffc", "fontStyle": "italic", "token": "meta.diff.header.to-file" }, { "foreground": "219186", "background": "eae3ca", "token": "markup.inserted" }, { "foreground": "d3201f", "token": "other.package.exclude" }, { "foreground": "d3201f", "token": "other.remove" }, { "foreground": "269186", "token": "other.add" }, { "foreground": "ff5874", "token": "constant.language.python" }, { "foreground": "82aaff", "token": "variable.parameter.function.python" }, { "foreground": "82aaff", "token": "meta.function-call.arguments.python" }, { "foreground": "b2ccd6", "token": "meta.function-call.python" }, { "foreground": "b2ccd6", "token": "meta.function-call.generic.python" }, { "foreground": "d6deeb", "token": "punctuation.python" }, { "foreground": "addb67", "token": "entity.name.function.decorator.python" }, { "foreground": "8eace3", "token": "source.python variable.language.special" }, { "foreground": "82b1ff", "token": "markup.heading.markdown" }, { "foreground": "c792ea", "fontStyle": "italic", "token": "markup.italic.markdown" }, { "foreground": "addb67", "fontStyle": "bold", "token": "markup.bold.markdown" }, { "foreground": "697098", "token": "markup.quote.markdown" }, { "foreground": "80cbc4", "token": "markup.inline.raw.markdown" }, { "foreground": "ff869a", "token": "markup.underline.link.markdown" }, { "foreground": "ff869a", "token": "markup.underline.link.image.markdown" }, { "foreground": "d6deeb", "token": "string.other.link.title.markdown" }, { "foreground": "d6deeb", "token": "string.other.link.description.markdown" }, { "foreground": "82b1ff", "token": "punctuation.definition.string.markdown" }, { "foreground": "82b1ff", "token": "punctuation.definition.string.begin.markdown" }, { "foreground": "82b1ff", "token": "punctuation.definition.string.end.markdown" }, { "foreground": "82b1ff", "token": "meta.link.inline.markdown punctuation.definition.string" }, { "foreground": "7fdbca", "token": "punctuation.definition.metadata.markdown" }, { "foreground": "82b1ff", "token": "beginning.punctuation.definition.list.markdown" } ], "colors": { "editor.foreground": "#d6deeb", "editor.background": "#011627", "editor.selectionBackground": "#5f7e9779", "editor.lineHighlightBackground": "#010E17", "editorCursor.foreground": "#80a4c2", "editorWhitespace.foreground": "#2e2040", "editorIndentGuide.background": "#5e81ce52", "editor.selectionHighlightBorder": "#122d42" } }Oh, and Control+b beautifies the code in the active editor using Prettier
Also, code is stored locally using localforage
Working version here
Reacted by Marius Sarca and Sergey Romanenko@msarca Bump! 😃
- locked and limited conversation to collaborators
on Sep 18, 2021
It would be really cool to have a live play, much like TailwindCSS's play, this would greatly speed up a lot of the development process for us devs!