improve code-interactive

Author: keithamus

.eleventy.js

@@ -72,7 +72,9 @@ module.exports = (eleventyConfig) => {
     html: true,
     linkify: true,
     highlight: (str, lang) => {
-      return `<pre><code-interactive lang="${lang}">${md.utils.escapeHtml(str)}</code-interactive></pre>`
+      return `<pre class="code-interactive"><code-interactive lang="${lang}">${md.utils.escapeHtml(
+        str
+      )}</code-interactive></pre>`
     },
   })
     .use(headers, { prefixHeadingIds: false })

css/code-interactive.css

@@ -2,9 +2,6 @@
   background-color: var(--surface-2);
   display: block;
   border-radius: var(--radius-2);
-  max-inline-size: 100ch;
-  padding: var(--size-3);
-  margin-block: var(--size-5);
   overflow-x: auto;
   color: var(--text-2);
 
@@ -20,6 +17,7 @@
   --token-number: var(--green-6);
   --token-comment: var(--teal-6);
   --token-function: var(--pink-6);
+  --token-variable: var(--text-2);
   --token-string: var(--cyan-6);
   --token-template-string: var(--cyan-6);
   --token-interpolation: var(--gray-6);
@@ -29,6 +27,7 @@
 @media (prefers-color-scheme: dark) {
   :host {
     color: var(--cyan-6);
+
     --token-punctuation: var(--indigo-2);
     --token-tag: var(--indigo-4);
     --token-attr-name: var(--pink-6);
@@ -39,35 +38,42 @@
   }
 }
 
+/* stylelint-disable selector-class-pattern */
 .ͼ1 .cm-scroller {
   font-family: var(--font-mono);
+  padding: var(--size-3);
 }
 
-.ͼf {
-  color: var(--token-template-string);
+.ͼb {
+  color: var(--token-keyword);
 }
 
-/* Shared tokens */
-.token.punctuation {
-  color: var(--token-punctuation);
+.ͼd {
+  color: var(--token-number);
 }
-/* CSS tokens */
-.token.selector {
-  color: var(--token-selector);
+
+.ͼe {
+  color: var(--token-string);
 }
-.token.property {
-  color: var(--token-property);
+
+.ͼf {
+  color: var(--token-template-string);
 }
-/* HTML tokens */
-.token.tag {
-  color: var(--token-tag);
+
+.ͼg {
+  color: var(--token-variable);
 }
-.token.attr-name {
-  color: var(--token-attr-name);
+
+.ͼj {
+  color: var(--token-class-name);
 }
-.token.attr-value {
-  color: var(--token-attr-value);
+
+.ͼl {
+  color: var(--token-function);
 }
-.token.attr-equals {
-  color: var(--token-attr-equals);
+
+.ͼm {
+  color: var(--token-comment);
 }
+
+/* stylelint-enable selector-class-pattern */

css/global.css

@@ -354,6 +354,7 @@ page-search {
   margin-block: var(--size-5);
 }
 
+<<<<<<< HEAD
 .language-js .keyword {
   color: var(--orange-6);
 }
@@ -458,3 +459,8 @@ page-search {
 .token.attr-equals {
   color: var(--token-attr-equals);
 }
+
+.code-interactive {
+  max-inline-size: 100ch;
+  margin-block: var(--size-5);
+}

package-lock.json

@@ -74,6 +74,8 @@
     "@11ty/eleventy-fetch": "^3.0.0",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
+    "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.1",
     "@github/relative-time-element": "^4.1.5",
     "@jamshop/eleventy-plugin-esbuild": "WebComponentsGuide/eleventy-plugin-esbuild",
     "@oddbird/popover-polyfill": "^0.0.8",

package.json

@@ -2,37 +2,33 @@ import styles from "../css/code-interactive.css"
 
 import { EditorView } from "codemirror"
 import { javascript } from "@codemirror/lang-javascript"
+import { html } from "@codemirror/lang-html"
+import { css } from "@codemirror/lang-css"
 import {
-  keymap,
-  highlightSpecialChars,
+  crosshairCursor,
   drawSelection,
-  highlightActiveLine,
   dropCursor,
+  highlightActiveLine,
+  highlightSpecialChars,
+  keymap,
   rectangularSelection,
-  crosshairCursor,
-  lineNumbers,
-  highlightActiveLineGutter,
 } from "@codemirror/view"
-import { EditorState, Transaction } from "@codemirror/state"
+import { EditorState } from "@codemirror/state"
 import {
-  defaultHighlightStyle,
-  syntaxHighlighting,
-  indentOnInput,
   bracketMatching,
-  foldGutter,
+  defaultHighlightStyle,
   foldKeymap,
+  indentOnInput,
+  syntaxHighlighting,
 } from "@codemirror/language"
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands"
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
-import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete"
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search"
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete"
 import { lintKeymap } from "@codemirror/lint"
 
 const setup = (() => [
-  //lineNumbers(),
-  //highlightActiveLineGutter(),
   highlightSpecialChars(),
   history(),
-  //foldGutter(),
   drawSelection(),
   dropCursor(),
   EditorState.allowMultipleSelections.of(true),
@@ -56,14 +52,14 @@ const setup = (() => [
   ]),
 ])()
 
-class CodeInteractiveElement extends HTMLElement {
+export default class CodeInteractiveElement extends HTMLElement {
   static define(tagName = "code-interactive") {
     customElements.define(tagName, this)
   }
 
   shadowRoot = this.attachShadow({ mode: "open" })
   #editor = new EditorView({
-    extensions: [setup, javascript()],
+    extensions: [setup, javascript(), html(), css()],
     parent: this.shadowRoot,
     root: this.shadowRoot,
     doc: this.textContent,
@@ -73,5 +69,3 @@ class CodeInteractiveElement extends HTMLElement {
     this.shadowRoot.adoptedStyleSheets.push(styles)
   }
 }
-
-CodeInteractiveElement.define()