Comments (6)
Explosion-Scratch
commented on June 27, 2024
2
Working version here
from assembler.
Explosion-Scratch
commented on June 27, 2024
1
Update
I made an Assembler CSS play! Here's the code!
Code editor.zip
from assembler.
msarca
commented on June 27, 2024
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.
from assembler.
Explosion-Scratch
commented on June 27, 2024
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/[email protected]/esm/parser-babel.mjs";
import parserHTML from "https://unpkg.com/[email protected]/esm/parser-html.mjs";
import parserCSS from "https://unpkg.com/[email protected]/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"
}
}
from assembler.
Explosion-Scratch
commented on June 27, 2024
Oh, and Control+b beautifies the code in the active editor using Prettier
Also, code is stored locally using localforage
from assembler.
Explosion-Scratch
commented on June 27, 2024
@msarca Bump! 😃
from assembler.
Related Issues (14)
- Prerendering support HOT 3
- Plugins development HOT 2
- SM breakpoint applied for all breakpoints HOT 1
- Included plugins? HOT 2
- Idea: Assembler Functions HOT 5
- Add Pseudo-elements support HOT 1
- x-style is not a valid HTML5 attribute HOT 1
- Question
- [bug] Render bug HOT 1
- Explain the way of working
- Can't register property? HOT 2
- Ideas HOT 3
- Turn on discussions HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from assembler.