Fix and improve Prism code highlighting

.babelrc

@@ -5,7 +5,6 @@
       {
         "languages": ["markup", "css", "clike", "javascript"],
         "plugins": ["line-numbers"],
-        "theme": "coy",
         "css": true
       }
     ]

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 {

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);
 }

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 () {
@@ -23,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");
@@ -32,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();
@@ -55,14 +62,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

editor/js/editor-libs/highlight.js

@@ -0,0 +1,14 @@
+import Prism from "prismjs";
+
+/**
+ * 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;

editor/tmpl/live-css-tmpl.html

@@ -5,10 +5,6 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>%title%</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link
-      rel="stylesheet"
-      href="../../css/css-examples-libs.css%cache-buster%"
-    />
     <link rel="stylesheet" href="../../css/editor-css.css%cache-buster%" />
     %example-css-src%
   </head>
@@ -33,7 +29,6 @@ <h4 class="output-heading">%title%</h4>
       </div>
     </section>
     <div id="user-message" class="user-message" aria-hidden="true">Copied!</div>
-    <script src="../../js/css-examples-libs.js%cache-buster%"></script>
     <script src="../../js/editor-css.js%cache-buster%"></script>
     %example-js-src%
   </body>

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"

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)),