From 58c4c97747de8fcb747bbfd00dea2d3e02adf262 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 12 Sep 2022 20:03:18 -0700 Subject: [PATCH 1/7] Remove redundant css-examples-libs --- editor/js/css-examples-libs.js | 1 - editor/tmpl/live-css-tmpl.html | 5 ----- package.json | 8 -------- webpack.config.js | 1 - 4 files changed, 15 deletions(-) delete mode 100644 editor/js/css-examples-libs.js diff --git a/editor/js/css-examples-libs.js b/editor/js/css-examples-libs.js deleted file mode 100644 index 271db0d28..000000000 --- a/editor/js/css-examples-libs.js +++ /dev/null @@ -1 +0,0 @@ -import Prism from "prismjs"; diff --git a/editor/tmpl/live-css-tmpl.html b/editor/tmpl/live-css-tmpl.html index ae6dd556b..1f97670c2 100644 --- a/editor/tmpl/live-css-tmpl.html +++ b/editor/tmpl/live-css-tmpl.html @@ -5,10 +5,6 @@ %title% - %example-css-src% @@ -33,7 +29,6 @@

%title%

- %example-js-src% diff --git a/package.json b/package.json index 13bc3407a..b38fd5551 100644 --- a/package.json +++ b/package.json @@ -25,10 +25,6 @@ "path": "./docs/css/codemirror-*.css", "maxSize": "3 kB" }, - { - "path": "./docs/css/css-examples-libs-*.css", - "maxSize": "4 kB" - }, { "path": "./docs/css/editor-css.css", "maxSize": "4 kB" @@ -45,10 +41,6 @@ "path": "./docs/js/codemirror-*.js", "maxSize": "75 kB" }, - { - "path": "./docs/js/css-examples-libs-*.js", - "maxSize": "8 kB" - }, { "path": "./docs/js/editor-css.js", "maxSize": "4 kB" diff --git a/webpack.config.js b/webpack.config.js index 411ad4913..8f001005e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,7 +15,6 @@ export default { "editor-css": "./editor/js/editable-css.js", "editor-js": "./editor/js/editable-js.js", "editor-wat": "./editor/js/editable-wat.js", - "css-examples-libs": "./editor/js/css-examples-libs.js", }, output: { path: fileURLToPath(new URL("docs/js", import.meta.url)), From 1cbd1774c12207c24518345845c5619e838bb1ae Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 12 Sep 2022 20:03:46 -0700 Subject: [PATCH 2/7] Create reusable code-highlighting function --- editor/js/editable-css.js | 13 ++++++------- editor/js/editor-libs/highlight.js | 17 +++++++++++++++++ 2 files changed, 23 insertions(+), 7 deletions(-) create mode 100644 editor/js/editor-libs/highlight.js diff --git a/editor/js/editable-css.js b/editor/js/editable-css.js index d852e2a5b..f46a20912 100644 --- a/editor/js/editable-css.js +++ b/editor/js/editable-css.js @@ -1,5 +1,6 @@ import * as clippy from "./editor-libs/clippy.js"; import * as mceEvents from "./editor-libs/events.js"; +import highlightCode from "./editor-libs/highlight.js"; import * as mceUtils from "./editor-libs/mce-utils.js"; (function () { @@ -55,14 +56,12 @@ import * as mceUtils from "./editor-libs/mce-utils.js"; resetButton.addEventListener("click", function () { for (var i = 0, l = exampleChoices.length; i < l; i++) { - var highlighted = Prism.highlight( - originalChoices[i], - Prism.languages.css + highlightCode( + exampleChoices[i].querySelector("code"), + "css", + originalChoices[i] ); - // IE11 does not support multiple selectors in `remove` - exampleChoices[i].classList.remove("invalid"); - exampleChoices[i].classList.remove("selected"); - exampleChoices[i].querySelector("code").innerHTML = highlighted; + exampleChoices[i].classList.remove("invalid", "selected"); } // if there is an initial choice set, set it as selected diff --git a/editor/js/editor-libs/highlight.js b/editor/js/editor-libs/highlight.js new file mode 100644 index 000000000..21acf9983 --- /dev/null +++ b/editor/js/editor-libs/highlight.js @@ -0,0 +1,17 @@ +import Prism from "prismjs"; + +// Don't automatically run Prism on all codeblocks +Prism.manual = true; + +/** + * Highlights codeblocks of specified code (or target's content) and applies it to the target element + */ +function highlightCode(target, language, code) { + var highlighted = Prism.highlight( + code || target.textContent, + Prism.languages[language] + ); + target.innerHTML = highlighted; +} + +export default highlightCode; From c5b9bb6eb738f653572e130d54a4747de1883e77 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 12 Sep 2022 20:04:01 -0700 Subject: [PATCH 3/7] Apply syntax highlighting when focusing out of an interactive example choice --- editor/js/editable-css.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/editor/js/editable-css.js b/editor/js/editable-css.js index f46a20912..faebcde6f 100644 --- a/editor/js/editable-css.js +++ b/editor/js/editable-css.js @@ -24,6 +24,7 @@ import * as mceUtils from "./editor-libs/mce-utils.js"; var exampleChoice = exampleChoices[i]; var choiceButton = document.createElement("button"); var choiceButtonText = document.createElement("span"); + var choiceCode = exampleChoice.querySelector("code"); choiceButton.setAttribute("type", "button"); choiceButton.classList.add("example-choice-button"); @@ -33,11 +34,16 @@ import * as mceUtils from "./editor-libs/mce-utils.js"; choiceButton.append(choiceButtonText); exampleChoice.append(choiceButton); - originalChoices.push(exampleChoice.querySelector("code").textContent); + originalChoices.push(choiceCode.textContent); if (exampleChoice.getAttribute("initial-choice")) { initialChoice = indexOf(exampleChoices, exampleChoice); } + + // Re-highlight after editing code + choiceCode.addEventListener("focusout", function (e) { + highlightCode(e.target, "css"); + }); } mceEvents.register(); From f3dd69dc1bde4ee6c412c460c876b45386fe515d Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 12 Sep 2022 20:04:11 -0700 Subject: [PATCH 4/7] Remove Prism theme (we're using our own) --- .babelrc | 1 - 1 file changed, 1 deletion(-) diff --git a/.babelrc b/.babelrc index f3377de8f..3cad91e7e 100644 --- a/.babelrc +++ b/.babelrc @@ -5,7 +5,6 @@ { "languages": ["markup", "css", "clike", "javascript"], "plugins": ["line-numbers"], - "theme": "coy", "css": true } ] From 97d2e03bcd670eeb0b1eafda09a8143570c5a875 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 12 Sep 2022 21:56:08 -0700 Subject: [PATCH 5/7] Improve styling --- editor/css/editable-css.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/editor/css/editable-css.css b/editor/css/editable-css.css index abfc8f57b..efd62db5b 100644 --- a/editor/css/editable-css.css +++ b/editor/css/editable-css.css @@ -74,8 +74,11 @@ background-color: var(--background-secondary); } -.live .example-choice code { +.live .example-choice pre { + width: 100%; + margin: 0; padding: 10px 0; + overflow-x: scroll; } .example-choice-list .example-choice:first-child { From e3a04ae1bdf433cdc66a8ad5ad69c6899a6fcea0 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 12 Sep 2022 22:21:35 -0700 Subject: [PATCH 6/7] Add colors to Prism formatting --- editor/css/editor-libs/prism-override.css | 38 ++++++++++++++++++----- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/editor/css/editor-libs/prism-override.css b/editor/css/editor-libs/prism-override.css index 3911b29cb..36623a37c 100644 --- a/editor/css/editor-libs/prism-override.css +++ b/editor/css/editor-libs/prism-override.css @@ -37,21 +37,43 @@ code[class*="language-"] { color: #333; } -/* overrides for increased a11y */ +.token { + color: var(--code-token-default); +} + +.token.punctuation { + color: var(--code-token-punctuation); +} + .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { - color: #58636d; + color: var(--code-token-comment); +} + +.token.keyword, +.token.tag .token.builtin { + color: var(--code-token-tag); +} + +.token.attribute, +.token.attr-name { + color: var(--code-token-attribute-name); } -.token.selector, -.token.attr-name, .token.string, .token.char, -.token.function, -.token.builtin, -.token.inserted { - color: #2545a7; +.token.number, +.token.atom { + color: var(--code-token-attribute-value); +} + +.token.selector { + color: var(--code-token-selector); +} + +.token.property { + color: var(--code-token-attribute-name); } From f4a7d87e397b2a735d235ebd74960833c6fa85f4 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 12 Sep 2022 22:21:54 -0700 Subject: [PATCH 7/7] Auto-run Prism --- editor/js/editor-libs/highlight.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/editor/js/editor-libs/highlight.js b/editor/js/editor-libs/highlight.js index 21acf9983..c41993987 100644 --- a/editor/js/editor-libs/highlight.js +++ b/editor/js/editor-libs/highlight.js @@ -1,8 +1,5 @@ import Prism from "prismjs"; -// Don't automatically run Prism on all codeblocks -Prism.manual = true; - /** * Highlights codeblocks of specified code (or target's content) and applies it to the target element */