@ape-egg/codie 0.1.7 → 0.1.9

package/README.md

@@ -18,11 +18,11 @@ highlight + format    +editable             +live output, inspect,
 
 ### Core Features
 
-- **Syntax Highlighting**: HTML, CSS, and JavaScript with language-aware highlighting
+- **Syntax Highlighting**: HTML, CSS, JavaScript, JSON, shell and Python, detected from the code itself
 - **Editable Mode**: Transform static code into a live editor with textarea overlay
 - **Line Numbers**: Optional numbered rows for code reference
 - **Its Own Element**: `<codie>` is the block; `<template codie>` holds HTML the browser must not parse
-- **Language Modes**: Granular control via attributes (`highlight-html`, `highlight-css`, `highlight-js`)
+- **Language Modes**: Pin a language via attributes (`highlight-html`, `highlight-css`, `highlight-js`, `highlight-json`)
 - **Dark/Light Themes**: Toggle with `[dark]` attribute
 - **Runtime State Toggle**: Change features dynamically via `codieRef.editable`, `codieRef.numberedRows`
 
@@ -98,16 +98,19 @@ editor.onEdit = ({ formatted, raw }) => {
 ### Language-Specific Highlighting
 
 ```html
-<!-- Only highlight HTML -->
+<!-- HTML, with its <script>, <style> and on* handlers -->
 <template codie highlight-html>...</template>
 
-<!-- Only highlight CSS -->
+<!-- CSS: stylesheets or bare declaration lists -->
 <codie highlight-css>...</codie>
 
-<!-- Only highlight JavaScript -->
+<!-- JavaScript -->
 <codie highlight-js>...</codie>
 
-<!-- Highlight all languages (default) -->
+<!-- JSON -->
+<codie highlight-json>...</codie>
+
+<!-- Detected from the code: HTML, CSS, JavaScript, JSON, shell, Python or plain text (default) -->
 <codie>...</codie>
 ```
 
@@ -174,9 +177,11 @@ A `<codie>` element is an instance by its tag. The attributes below go on it, or
 
 - `codie` - Marks an element that is not `<codie>` as an instance, `<template codie>` above all
 - `dehydrate` - Skip initialization (for documentation)
-- `highlight-html` - Enable HTML highlighting only
-- `highlight-css` - Enable CSS highlighting only
-- `highlight-js` - Enable JavaScript highlighting only
+- `highlight-html` - Highlight as HTML, including embedded `<script>`, `<style>` and `on*` handlers
+- `highlight-css` - Highlight as CSS
+- `highlight-js` - Highlight as JavaScript
+- `highlight-json` - Highlight as JSON
+- none of the above - Detect the language from the code (HTML, CSS, JavaScript, JSON, shell, Python or plain text)
 - `dark` - Apply dark theme
 
 ### Runtime Attributes (applied by codie)
@@ -224,7 +229,7 @@ editor.onEdit = ({ formatted }) => {
 
 ### Implemented
 
-- ✓ Syntax highlighting (HTML, CSS, JS)
+- ✓ Syntax highlighting (HTML, CSS, JS, JSON, shell, Python) with language detection
 - ✓ Editable mode with textarea overlay
 - ✓ Line numbers
 - ✓ Tab handling (insert spaces, multi-line indent, outdent)

package/codie.js

@@ -1,13 +1,12 @@
 // Codie - Modular Code Display & Editing
 import { ATTR, CLASS } from './constants.js';
 import {
+  highlight,
+  detectLanguage,
   highlightHTML,
   highlightJS,
   highlightCSS,
-  highlightJSON,
   highlightJSRaw,
-  highlightCSSOnly,
-  highlightJSOnly,
 } from './highlight.js';
 import {
   escapeHTML,
@@ -21,59 +20,19 @@ import { initNumberRows, updateNumberRows } from './numberRows.js';
 import { initEditable, destroyEditable } from './editable.js';
 import { initFoldable, destroyFoldable } from './foldable.js';
 
-// Detect which languages to highlight from element attributes
-const getHighlightModes = (el) => {
-  const hasHTML = el.hasAttribute(ATTR.HIGHLIGHT_HTML);
-  const hasCSS = el.hasAttribute(ATTR.HIGHLIGHT_CSS);
-  const hasJS = el.hasAttribute(ATTR.HIGHLIGHT_JS);
-  const hasJSON = el.hasAttribute(ATTR.HIGHLIGHT_JSON);
-  const explicit = hasHTML || hasCSS || hasJS || hasJSON;
-
-  return {
-    html: !explicit || hasHTML,
-    css: !explicit || hasCSS,
-    js: !explicit || hasJS,
-    json: !explicit || hasJSON,
-  };
+const LANGUAGE_ATTRS = {
+  html: ATTR.HIGHLIGHT_HTML,
+  json: ATTR.HIGHLIGHT_JSON,
+  css: ATTR.HIGHLIGHT_CSS,
+  js: ATTR.HIGHLIGHT_JS,
 };
 
-// Highlight code content based on enabled modes
-const highlight = (code, modes, options = {}) => {
-  const escaped = escapeHTML(code);
-
-  // Detect JSON by content: must start with { or [ AND contain quoted key patterns
-  const looksLikeJSON = /^\s*[{\[]/.test(code) && /"[^"]*"\s*:/.test(code);
-
-  // JSON takes priority over HTML when content looks like JSON
-  if (modes.json && looksLikeJSON) {
-    return highlightJSON(escaped);
-  }
-
-  if (modes.html && !looksLikeJSON) {
-    return highlightHTML(escaped, {
-      ...options,
-      highlightJS: modes.js,
-      highlightCSS: modes.css,
-    });
-  }
-
-  // Standalone mode (no HTML): use direct highlighters, not the *Only variants
-  if (!modes.html) {
-    if (modes.json) return highlightJSON(escaped);
-    if (modes.css) return highlightCSS(escaped);
-    if (modes.js) return highlightJSRaw(code);
-    return escaped;
-  }
-
-  let result = escaped;
-  if (modes.js) result = highlightJSOnly(result);
-  if (modes.css) result = highlightCSSOnly(result);
-  return result;
-};
+const languageOf = (el) =>
+  Object.keys(LANGUAGE_ATTRS).find((language) => el.hasAttribute(LANGUAGE_ATTRS[language]));
 
 // Toggle a feature on the instance
 const toggleFeature = (instance, feature, enabled) => {
-  const { el, display, modes } = instance;
+  const { el, display, language, _code } = instance;
 
   switch (feature) {
     case 'numberedRows':
@@ -99,7 +58,7 @@ const toggleFeature = (instance, feature, enabled) => {
 
     case 'foldable':
       if (enabled && !el.hasAttribute(ATTR.FOLDABLE)) {
-        initFoldable(el, display, modes);
+        initFoldable(el, display, language ?? detectLanguage(_code));
         el.setAttribute(ATTR.FOLDABLE, '');
       } else if (!enabled && el.hasAttribute(ATTR.FOLDABLE)) {
         destroyFoldable(el, display);
@@ -135,7 +94,7 @@ const codie = (elOrConfig = {}) => {
     return null;
   }
 
-  const modes = getHighlightModes(el);
+  const language = languageOf(el);
   let raw = el.tagName === 'TEMPLATE' ? el.innerHTML : el.textContent;
 
   // Decode HTML entities from template innerHTML
@@ -149,7 +108,7 @@ const codie = (elOrConfig = {}) => {
   // Create display layer
   const display = document.createElement('pre');
   display.className = `${CLASS.CODE_LAYER} ${CLASS.DISPLAY}`;
-  display.innerHTML = highlight(code, modes, {
+  display.innerHTML = highlight(code, language, {
     preserveWhitespace: !config.foldable,
   });
 
@@ -161,7 +120,7 @@ const codie = (elOrConfig = {}) => {
   const internal = {
     el,
     display,
-    modes,
+    language,
     _code: code,
     _config: { ...config },
     textarea: null,
@@ -188,7 +147,7 @@ const codie = (elOrConfig = {}) => {
         // Decode HTML entities when setting code (same as initialization)
         const decoded = unescapeHTML(value);
         target._code = decoded;
-        target.display.innerHTML = highlight(decoded, target.modes, {
+        target.display.innerHTML = highlight(decoded, target.language, {
           preserveWhitespace: !target._foldable,
         });
         if (target.lineNumbers) {

package/constants.js

@@ -227,3 +227,17 @@ export const JS_IMPORT_KEYWORDS = new Set(['import', 'export', 'from'])
 
 // JavaScript bracket characters
 export const JS_BRACKETS = new Set(['{', '}', '(', ')', '[', ']'])
+
+export const PY_KEYWORDS = new Set([
+  'and', 'as', 'assert', 'async', 'await', 'break', 'class', 'continue', 'def', 'del',
+  'elif', 'else', 'except', 'finally', 'for', 'global', 'if', 'in', 'is', 'lambda',
+  'nonlocal', 'not', 'or', 'pass', 'raise', 'return', 'try', 'while', 'with', 'yield',
+  'None', 'True', 'False', 'self',
+])
+
+export const PY_IMPORT_KEYWORDS = new Set(['import', 'from'])
+
+export const SHELL_KEYWORDS = new Set([
+  'if', 'then', 'else', 'elif', 'fi', 'for', 'in', 'do', 'done', 'case', 'esac',
+  'while', 'until', 'select', 'function',
+])

package/editable.js

@@ -1,42 +1,10 @@
 // Codie editable textarea layer
 import { CLASS } from './constants.js'
-import { highlightHTML, highlightJS, highlightCSS, highlightJSON, highlightJSRaw, highlightCSSOnly, highlightJSOnly } from './highlight.js'
-import { escapeHTML, formatDocument, normalizeInlineWhitespace, cleanupBooleanAttrs } from './format.js'
+import { highlight } from './highlight.js'
+import { formatDocument, normalizeInlineWhitespace, cleanupBooleanAttrs } from './format.js'
 import { updateNumberRows } from './numberRows.js'
 import keyboard from './keyboard.js'
 
-// Highlight code based on modes — same dispatch as codie.js, so an edit
-// re-renders through the same highlighter the initial display used
-const highlight = (code, modes) => {
-  const escaped = escapeHTML(code)
-
-  const looksLikeJSON = /^\s*[{\[]/.test(code) && /"[^"]*"\s*:/.test(code)
-
-  if (modes.json && looksLikeJSON) {
-    return highlightJSON(escaped)
-  }
-
-  if (modes.html && !looksLikeJSON) {
-    return highlightHTML(escaped, {
-      preserveWhitespace: true,
-      highlightJS: modes.js,
-      highlightCSS: modes.css,
-    })
-  }
-
-  if (!modes.html) {
-    if (modes.json) return highlightJSON(escaped)
-    if (modes.css) return highlightCSS(escaped)
-    if (modes.js) return highlightJSRaw(code)
-    return escaped
-  }
-
-  let result = escaped
-  if (modes.js) result = highlightJSOnly(result)
-  if (modes.css) result = highlightCSSOnly(result)
-  return result
-}
-
 // Initialize editable textarea
 export const initEditable = (el, instance, config) => {
   const textarea = document.createElement('textarea')
@@ -59,7 +27,7 @@ export const initEditable = (el, instance, config) => {
     const scrollLeft = el.scrollLeft
 
     // Update display
-    instance.display.innerHTML = highlight(newCode, instance.modes)
+    instance.display.innerHTML = highlight(newCode, instance.language, { preserveWhitespace: true })
 
     // Restore scroll
     el.scrollTop = scrollTop

package/foldable.js

@@ -124,9 +124,9 @@ const wrapWithFoldControls = (html, defaultOpenTags = ['html', 'body', 'head'])
 }
 
 // Initialize foldable on an element
-export const initFoldable = (el, display, modes) => {
+export const initFoldable = (el, display, language) => {
   // Only fold HTML content
-  if (!modes.html) return
+  if (language !== 'html') return
 
   const html = display.innerHTML
   display.innerHTML = wrapWithFoldControls(html)

package/highlight.js

@@ -1,13 +1,31 @@
 // Codie syntax highlighting engine
-import { CLASS, JS_KEYWORDS, JS_IMPORT_KEYWORDS, JS_BRACKETS } from './constants.js';
-
-// HTML entity escaping
-const escapeHTML = (str) =>
-  str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+import {
+  CLASS,
+  JS_KEYWORDS,
+  JS_IMPORT_KEYWORDS,
+  JS_BRACKETS,
+  PY_KEYWORDS,
+  PY_IMPORT_KEYWORDS,
+  SHELL_KEYWORDS,
+} from './constants.js';
+import { escapeHTML } from './format.js';
 
 // Wrap in span with class
 const span = (cls, content) => `<span class="${cls}">${content}</span>`;
 
+const JS = { keywords: JS_KEYWORDS, imports: JS_IMPORT_KEYWORDS };
+const PYTHON = { keywords: PY_KEYWORDS, imports: PY_IMPORT_KEYWORDS };
+const CALL = /\s*\(/y;
+
+const wordClass = (word, code, end, { keywords, imports }) => {
+  if (imports.has(word)) return CLASS.JS_IMPORT;
+  if (keywords.has(word)) return CLASS.JS_KEYWORD;
+  CALL.lastIndex = end;
+  return CALL.test(code) ? CLASS.JS_FUNCTION : CLASS.JS_IDENT;
+};
+
+const bracketClass = (punct) => (JS_BRACKETS.has(punct) ? CLASS.JS_IMPORT : CLASS.PUNCTUATION);
+
 // Highlight @[expression] - vibe brackets + variable names
 const highlightBindings = (text) =>
   text.replace(/@\[([^\]]+)\]/g, (_, expr) => {
@@ -21,13 +39,6 @@ const highlightBindings = (text) =>
     return `${span(CLASS.VIBE_COLOR, '@[')}${highlighted}${span(CLASS.VIBE_COLOR, ']')}`;
   });
 
-// Highlight $.variable - vibe state access
-const highlightStateAccess = (text) =>
-  text.replace(
-    /\$\.([a-zA-Z_][a-zA-Z0-9_]*)/g,
-    `${span(CLASS.VIBE_COLOR, '$.')}${span(CLASS.VIBE_VARIABLE, '$1')}`,
-  );
-
 // Highlight variable names in Vibe comments
 const highlightCommentVariables = (content) => {
   let result = content.replace(
@@ -44,7 +55,7 @@ const highlightCommentVariables = (content) => {
 export const highlightJS = (code, options = {}) => {
   const tokens = [];
   const tokenRegex =
-    /(@\[([^\]]+)\])|(&quot;(?:[^&]|&(?!quot;))*?&quot;)|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|((?<=^|\s)(?:\/\/|#)[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d[\d_]*(?:\.[\d_]+)?\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/g;
+    /(@\[([^\]]+)\])|(&quot;(?:[^&]|&(?!quot;))*?&quot;)|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|((?<=^|\s)(?:\/\/|#)[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d[\d_]*(?:\.[\d_]+)?\b)|((?<![\w$])[a-zA-Z_$][\w$]*)|([^\s])/g;
   let match,
     lastIndex = 0;
 
@@ -90,15 +101,9 @@ export const highlightJS = (code, options = {}) => {
     } else if (number) {
       tokens.push(span(CLASS.JS_NUMBER, full));
     } else if (word) {
-      if (JS_IMPORT_KEYWORDS.has(word)) tokens.push(span(CLASS.JS_IMPORT, full));
-      else if (JS_KEYWORDS.has(word)) tokens.push(span(CLASS.JS_KEYWORD, full));
-      else if (code.slice(tokenRegex.lastIndex).match(/^\s*\(/))
-        tokens.push(span(CLASS.JS_FUNCTION, full));
-      else tokens.push(span(CLASS.JS_IDENT, full));
+      tokens.push(span(wordClass(word, code, tokenRegex.lastIndex, JS), full));
     } else if (punct) {
-      tokens.push(
-        JS_BRACKETS.has(punct) ? span(CLASS.JS_IMPORT, full) : span(CLASS.PUNCTUATION, full),
-      );
+      tokens.push(span(bracketClass(punct), full));
     } else {
       tokens.push(full);
     }
@@ -115,7 +120,7 @@ export const highlightJSRaw = (code) => {
   // A command line: a bare lowercase word then arguments, on one full row — no JS
   // keyword lead, no assignment/call/statement characters, no trailing continuation \
   const tokenRegex =
-    /(^[ \t]*(?!(?:import|export|const|let|var|return|await|async|function|if|else|for|while|new|typeof|throw)\b)[a-z][\w.-]*[ \t]+[^\n=(){};]*[^\n\\=(){};])$|(<\/?[a-zA-Z][a-zA-Z0-9-]*(?:\s+[^>]*)?>)|("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|((?<=^|\s)(?:\/\/|#)[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d[\d_]*(?:\.[\d_]+)?\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/gm;
+    /(^[ \t]*(?!(?:import|export|const|let|var|return|await|async|function|if|else|for|while|new|typeof|throw)\b)[a-z][\w.-]*[ \t]+[^\n=(){};]*[^\n\\=(){};])$|(<\/?[a-zA-Z][a-zA-Z0-9-]*(?:\s+[^>]*)?>)|("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|((?<=^|\s)(?:\/\/|#)[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d[\d_]*(?:\.[\d_]+)?\b)|((?<![\w$])[a-zA-Z_$][\w$]*)|([^\s])/gm;
   let match,
     lastIndex = 0;
 
@@ -179,15 +184,9 @@ export const highlightJSRaw = (code) => {
     } else if (number) {
       tokens.push(span(CLASS.JS_NUMBER, escaped));
     } else if (word) {
-      if (JS_IMPORT_KEYWORDS.has(word)) tokens.push(span(CLASS.JS_IMPORT, escaped));
-      else if (JS_KEYWORDS.has(word)) tokens.push(span(CLASS.JS_KEYWORD, escaped));
-      else if (code.slice(tokenRegex.lastIndex).match(/^\s*\(/))
-        tokens.push(span(CLASS.JS_FUNCTION, escaped));
-      else tokens.push(span(CLASS.JS_IDENT, escaped));
+      tokens.push(span(wordClass(word, code, tokenRegex.lastIndex, JS), escaped));
     } else if (punct) {
-      tokens.push(
-        JS_BRACKETS.has(punct) ? span(CLASS.JS_IMPORT, escaped) : span(CLASS.PUNCTUATION, escaped),
-      );
+      tokens.push(span(bracketClass(punct), escaped));
     } else {
       tokens.push(escaped);
     }
@@ -201,6 +200,9 @@ export const highlightJSRaw = (code) => {
 // CSS highlighter - walks brace depth so nested rules (@supports, @media, and
 // & selectors) tokenize at every level, not just the innermost block
 export const highlightCSS = (code, options = {}) => {
+  const customProperties = (text) =>
+    text.replace(/--[\w-]+/g, (name) => span(CLASS.CSS_PROPERTY, name));
+
   const declarations = (text) => {
     const propRegex = /([\w-]+)(\s*:\s*)([^;]+)(;?)/g;
     let match,
@@ -208,7 +210,7 @@ export const highlightCSS = (code, options = {}) => {
       result = '';
 
     while ((match = propRegex.exec(text)) !== null) {
-      if (match.index > last) result += text.slice(last, match.index);
+      if (match.index > last) result += customProperties(text.slice(last, match.index));
       const [, prop, colon, value, semi] = match;
       result += span(CLASS.CSS_PROPERTY, prop) + span(CLASS.PUNCTUATION, colon);
       const highlighted = value.replace(/@\[([^\]]+)\]/g, (_, expr) => {
@@ -221,7 +223,7 @@ export const highlightCSS = (code, options = {}) => {
       if (semi) result += span(CLASS.PUNCTUATION, semi);
       last = propRegex.lastIndex;
     }
-    if (last < text.length) result += text.slice(last);
+    if (last < text.length) result += customProperties(text.slice(last));
     return result;
   };
 
@@ -244,8 +246,7 @@ export const highlightCSS = (code, options = {}) => {
     return depth ? -1 : i - 1;
   };
 
-  const block = (text, inRule) => {
-    const flush = (chunk) => (inRule ? declarations(chunk) : chunk);
+  const block = (text) => {
     let result = '',
       i = 0,
       pending = 0;
@@ -254,7 +255,7 @@ export const highlightCSS = (code, options = {}) => {
       if (text.startsWith('/*', i)) {
         const end = text.indexOf('*/', i + 2);
         const stop = end === -1 ? text.length : end + 2;
-        result += flush(text.slice(pending, i)) + span(CLASS.COMMENT, text.slice(i, stop));
+        result += declarations(text.slice(pending, i)) + span(CLASS.COMMENT, text.slice(i, stop));
         i = pending = stop;
         continue;
       }
@@ -272,15 +273,14 @@ export const highlightCSS = (code, options = {}) => {
 
       if (text[i] === '{') {
         const close = closingBrace(text, i);
-        const prelude = text.slice(pending, i);
-        const ws = prelude.match(/^(\s*)/)[1];
-        const name = prelude.trim();
+        const [, ws, name, gap] = text.slice(pending, i).match(/^(\s*)([\s\S]*?)(\s*)$/);
 
         result +=
           ws +
-          (name ? span(CLASS.CSS_SELECTOR, name) + ' ' : '') +
+          (name ? span(CLASS.CSS_SELECTOR, name) : '') +
+          gap +
           span(CLASS.PUNCTUATION, '{') +
-          block(text.slice(i + 1, close === -1 ? text.length : close), true) +
+          block(text.slice(i + 1, close === -1 ? text.length : close)) +
           (close === -1 ? '' : span(CLASS.PUNCTUATION, '}'));
 
         i = pending = close === -1 ? text.length : close + 1;
@@ -290,10 +290,10 @@ export const highlightCSS = (code, options = {}) => {
       i++;
     }
 
-    return result + flush(text.slice(pending));
+    return result + declarations(text.slice(pending));
   };
 
-  return block(code, false);
+  return block(code);
 };
 
 // JSON highlighter (receives HTML-escaped code)
@@ -341,34 +341,22 @@ export const highlightJSON = (code) => {
   return tokens.join('');
 };
 
-// CSS-only highlighter - only highlights content inside <style> tags
-export const highlightCSSOnly = (html, options = {}) => {
-  // Find and highlight only <style> tag contents
-  return html.replace(
-    /(&lt;style[^&]*&gt;)([\s\S]*?)(&lt;\/style&gt;)/gi,
-    (_, open, content, close) => open + highlightCSS(content) + close,
-  );
-};
-
-// JS-only highlighter - only highlights content inside <script> tags
-export const highlightJSOnly = (html, options = {}) => {
-  // Find and highlight only <script> tag contents
-  return html.replace(
-    /(&lt;script[^&]*&gt;)([\s\S]*?)(&lt;\/script&gt;)/gi,
-    (_, open, content, close) => open + highlightJS(content) + close,
-  );
-};
-
 // Bare CSS rules sitting outside any markup, handed to highlightCSS one whole
 // brace-balanced block at a time. Markup inside a candidate disqualifies it —
 // that is HTML, already highlighted.
 const bareCSS = (text) => {
   let result = '',
     i = 0,
-    done = 0;
+    done = 0,
+    nesting = 0;
 
   while (i < text.length) {
-    if (text[i] !== '{') {
+    if (text[i] === '<') {
+      nesting += text.startsWith('</', i) ? -1 : 1;
+      i = text.indexOf('>', i) + 1;
+      continue;
+    }
+    if (text[i] !== '{' || nesting) {
       i++;
       continue;
     }
@@ -408,10 +396,7 @@ const bareCSS = (text) => {
 };
 
 // HTML highlighter - main entry point
-export const highlightHTML = (
-  html,
-  { preserveWhitespace = false, highlightJS: doJS = true, highlightCSS: doCSS = true } = {},
-) => {
+export const highlightHTML = (html, { preserveWhitespace = false } = {}) => {
   let highlighted = html;
 
   // Format Vibe comments if not preserving whitespace
@@ -428,7 +413,7 @@ export const highlightHTML = (
 
   // HTML tags with attributes (attribute names can be @[...] name bindings)
   highlighted = highlighted.replace(
-    /(&lt;\/?)([a-zA-Z0-9\-]+)((?:\s+(?:[a-zA-Z0-9\-:]+|@\[[^\]]+\])(?:=(?:&quot;(?:(?!&quot;).)*?&quot;|'[^']*'|[^\s&gt;]+))?)*\s*)(\/?\s*&gt;)/gs,
+    /(&lt;[\/!]?)([a-zA-Z][a-zA-Z0-9\-]*)((?:\s+(?:[a-zA-Z0-9\-:]+|@\[[^\]]+\])(?:=(?:&quot;(?:(?!&quot;).)*?&quot;|'[^']*'|[^\s&gt;]+))?)*\s*)(\/?\s*&gt;)/gs,
     (fullMatch, open, tag, attrs, close) => {
       let result = span(CLASS.PUNCTUATION, open) + span(CLASS.TAG, tag);
 
@@ -454,7 +439,7 @@ export const highlightHTML = (
 
               if (quote) result += span(CLASS.PUNCTUATION, quote);
               if (name.startsWith('on')) {
-                result += span(CLASS.VIBE_COLOR, highlightStateAccess(value));
+                result += highlightJS(value);
               } else {
                 result += span(CLASS.ATTR_VALUE, highlightBindings(value));
               }
@@ -473,48 +458,44 @@ export const highlightHTML = (
     },
   );
 
-  // JavaScript in <script> tags (if enabled)
-  if (doJS) {
-    highlighted = highlighted.replace(
-      new RegExp(
-        `(<span class="${CLASS.PUNCTUATION}">&lt;<\\/span><span class="${CLASS.TAG}">script<\\/span>[\\s\\S]*?<span class="${CLASS.PUNCTUATION}">&gt;<\\/span>)([\\s\\S]*?)(<span class="${CLASS.PUNCTUATION}">&lt;\\/<\\/span><span class="${CLASS.TAG}">script<\\/span>)`,
-        'gi',
-      ),
-      (match, open, content, close) =>
-        content.includes(`class="${CLASS.JS_KEYWORD}"`)
-          ? match
-          : open + highlightJS(content) + close,
-    );
+  // JavaScript in <script> tags
+  highlighted = highlighted.replace(
+    new RegExp(
+      `(<span class="${CLASS.PUNCTUATION}">&lt;<\\/span><span class="${CLASS.TAG}">script<\\/span>[\\s\\S]*?<span class="${CLASS.PUNCTUATION}">&gt;<\\/span>)([\\s\\S]*?)(<span class="${CLASS.PUNCTUATION}">&lt;\\/<\\/span><span class="${CLASS.TAG}">script<\\/span>)`,
+      'gi',
+    ),
+    (match, open, content, close) =>
+      content.includes(`class="${CLASS.JS_KEYWORD}"`)
+        ? match
+        : open + highlightJS(content) + close,
+  );
 
-    // JavaScript in <code lang="js">
-    highlighted = highlighted.replace(
-      new RegExp(
-        `(<span class="${CLASS.PUNCTUATION}">&lt;<\\/span><span class="${CLASS.TAG}">code<\\/span>\\s*<span class="${CLASS.ATTR_NAME}">lang<\\/span><span class="${CLASS.PUNCTUATION}">=<\\/span><span class="${CLASS.PUNCTUATION}">&quot;<\\/span><span class="${CLASS.ATTR_VALUE}">js<\\/span><span class="${CLASS.PUNCTUATION}">&quot;<\\/span><span class="${CLASS.PUNCTUATION}">&gt;<\\/span>)([\\s\\S]*?)(<span class="${CLASS.PUNCTUATION}">&lt;\\/<\\/span><span class="${CLASS.TAG}">code<\\/span>)`,
-        'gi',
-      ),
-      (match, open, content, close) =>
-        content.includes(`class="${CLASS.JS_KEYWORD}"`)
-          ? match
-          : open + highlightJS(content) + close,
-    );
-  }
+  // JavaScript in <code lang="js">
+  highlighted = highlighted.replace(
+    new RegExp(
+      `(<span class="${CLASS.PUNCTUATION}">&lt;<\\/span><span class="${CLASS.TAG}">code<\\/span>\\s*<span class="${CLASS.ATTR_NAME}">lang<\\/span><span class="${CLASS.PUNCTUATION}">=<\\/span><span class="${CLASS.PUNCTUATION}">&quot;<\\/span><span class="${CLASS.ATTR_VALUE}">js<\\/span><span class="${CLASS.PUNCTUATION}">&quot;<\\/span><span class="${CLASS.PUNCTUATION}">&gt;<\\/span>)([\\s\\S]*?)(<span class="${CLASS.PUNCTUATION}">&lt;\\/<\\/span><span class="${CLASS.TAG}">code<\\/span>)`,
+      'gi',
+    ),
+    (match, open, content, close) =>
+      content.includes(`class="${CLASS.JS_KEYWORD}"`)
+        ? match
+        : open + highlightJS(content) + close,
+  );
 
-  // CSS in <style> tags (if enabled)
-  if (doCSS) {
-    highlighted = highlighted.replace(
-      new RegExp(
-        `(<span class="${CLASS.PUNCTUATION}">&lt;<\\/span><span class="${CLASS.TAG}">style<\\/span>[\\s\\S]*?<span class="${CLASS.PUNCTUATION}">&gt;<\\/span>)([\\s\\S]*?)(<span class="${CLASS.PUNCTUATION}">&lt;\\/<\\/span><span class="${CLASS.TAG}">style<\\/span>)`,
-        'gi',
-      ),
-      (match, open, content, close) =>
-        content.includes(`class="${CLASS.CSS_SELECTOR}"`)
-          ? match
-          : open + highlightCSS(content) + close,
-    );
+  // CSS in <style> tags
+  highlighted = highlighted.replace(
+    new RegExp(
+      `(<span class="${CLASS.PUNCTUATION}">&lt;<\\/span><span class="${CLASS.TAG}">style<\\/span>[\\s\\S]*?<span class="${CLASS.PUNCTUATION}">&gt;<\\/span>)([\\s\\S]*?)(<span class="${CLASS.PUNCTUATION}">&lt;\\/<\\/span><span class="${CLASS.TAG}">style<\\/span>)`,
+      'gi',
+    ),
+    (match, open, content, close) =>
+      content.includes(`class="${CLASS.CSS_SELECTOR}"`)
+        ? match
+        : open + highlightCSS(content) + close,
+  );
 
-    // CSS rules outside <style> tags (bare CSS blocks in mixed HTML+CSS snippets)
-    highlighted = bareCSS(highlighted);
-  }
+  // CSS rules outside <style> tags (bare CSS blocks in mixed HTML+CSS snippets)
+  highlighted = bareCSS(highlighted);
 
   // Remaining @[...] patterns
   highlighted = highlighted.replace(
@@ -530,3 +511,181 @@ export const highlightHTML = (
 
   return highlighted;
 };
+
+export const highlightPython = (code) =>
+  code.replace(
+    /(\b[rRbBuUfF]{1,2})?("""[\s\S]*?"""|'''[\s\S]*?'''|"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*')|(#[^\n]*)|(\b\d[\d_]*(?:\.[\d_]*)?(?:[eE][+-]?\d+)?\b)|(\b[a-zA-Z_]\w*\b)|([^\s\w])/g,
+    (full, prefix, string, comment, number, word, punct, offset) => {
+      const escaped = escapeHTML(full);
+      if (string) return span(CLASS.JS_STRING, escaped);
+      if (comment) return span(CLASS.COMMENT, escaped);
+      if (number) return span(CLASS.JS_NUMBER, escaped);
+      if (word) return span(wordClass(word, code, offset + full.length, PYTHON), escaped);
+      return span(bracketClass(punct), escaped);
+    },
+  );
+
+export const highlightShell = (code) => {
+  let i = 0;
+
+  const take = (regex) => {
+    regex.lastIndex = i;
+    const match = regex.exec(code);
+    if (match) i = regex.lastIndex;
+    return match?.[0];
+  };
+
+  const expansion = () => {
+    if (code.startsWith('$(', i)) {
+      i += 2;
+      const inner = commands(')');
+      return span(CLASS.PUNCTUATION, '$(') + inner + (take(/\)/y) ? span(CLASS.PUNCTUATION, ')') : '');
+    }
+    const variable = take(/\$(?:\{[^}\n]*\}|[A-Za-z_]\w*|[\d@*#?$!-])/y);
+    return variable && span(CLASS.JS_IDENT, escapeHTML(variable));
+  };
+
+  const doubleQuoted = () => {
+    let result = '',
+      text = code[i++];
+    const flush = () => {
+      if (text) result += span(CLASS.JS_STRING, escapeHTML(text));
+      text = '';
+    };
+
+    while (i < code.length && code[i] !== '"') {
+      const piece = code[i] === '$' && expansion();
+      if (piece) {
+        flush();
+        result += piece;
+      } else if (code[i] === '\\') {
+        text += code.slice(i, i + 2);
+        i += 2;
+      } else {
+        text += code[i++];
+      }
+    }
+    text += take(/"/y) ?? '';
+    flush();
+    return result;
+  };
+
+  const commands = (stop) => {
+    let result = '',
+      command = true,
+      header = null,
+      pattern = false;
+
+    while (i < code.length && !(code[i] === stop && !pattern)) {
+      const char = code[i];
+      const wordStart = !i || /[\s;&|()`]/.test(code[i - 1]);
+      let redirect;
+
+      if (char === '\n') {
+        result += code[i++];
+        command = !pattern;
+      } else if (/\s/.test(char)) {
+        result += take(/[^\S\n]+/y);
+      } else if (char === '\\') {
+        result += escapeHTML(code.slice(i, i + 2));
+        i += 2;
+      } else if (char === '#' && wordStart) {
+        result += span(CLASS.COMMENT, escapeHTML(take(/[^\n]*/y)));
+      } else if (char === "'") {
+        result += span(CLASS.JS_STRING, escapeHTML(take(/'[^']*'?/y)));
+        if (wordStart) command = false;
+      } else if (char === '"') {
+        result += doubleQuoted();
+        if (wordStart) command = false;
+      } else if (char === '$') {
+        result += expansion() || code[i++];
+        if (wordStart) command = false;
+      } else if (char === '`') {
+        i++;
+        result += span(CLASS.PUNCTUATION, '`') + commands('`');
+        if (take(/`/y)) result += span(CLASS.PUNCTUATION, '`');
+      } else if (char === '(') {
+        i++;
+        result += span(CLASS.PUNCTUATION, '(') + commands(')');
+        if (take(/\)/y)) result += span(CLASS.PUNCTUATION, ')');
+        command = false;
+      } else if (char === ')') {
+        result += span(CLASS.PUNCTUATION, code[i++]);
+        command = pattern;
+        pattern = false;
+      } else if (/[;&|]/.test(char)) {
+        const operator = take(/;;|\|\||&&|[;&|]/y);
+        result += span(CLASS.PUNCTUATION, operator);
+        if (operator === ';;') pattern = true;
+        command = !pattern;
+      } else if ((redirect = take(/\d*(?:>>|[<>]&\d*-?|>|<)/y))) {
+        result += span(CLASS.PUNCTUATION, escapeHTML(redirect));
+      } else {
+        const word = take(/[^\s'"$`;&|()<>\\]+/y);
+        if (pattern && word === 'esac') {
+          result += span(CLASS.JS_KEYWORD, word);
+          pattern = false;
+          command = false;
+        } else if (!wordStart || pattern) {
+          result += escapeHTML(word);
+        } else if (header && word === 'in') {
+          result += span(CLASS.JS_KEYWORD, word);
+          pattern = header === 'case';
+          header = null;
+        } else if (['[', '[[', ']', ']]', '{', '}', '!'].includes(word)) {
+          result += span(CLASS.PUNCTUATION, word);
+          command = ['{', '}', '!'].includes(word) || (!word.startsWith('[') && command);
+        } else if (!command) {
+          result += escapeHTML(word);
+        } else if (SHELL_KEYWORDS.has(word)) {
+          result += span(CLASS.JS_KEYWORD, word);
+          header = ['for', 'case', 'select'].includes(word) ? word : null;
+          command = !header && !['fi', 'done', 'esac'].includes(word);
+        } else if (/^[A-Za-z_]\w*=/.test(word)) {
+          const [name, value] = word.split(/=(.*)/s);
+          result += span(CLASS.JS_IDENT, name) + span(CLASS.PUNCTUATION, '=') + escapeHTML(value);
+        } else {
+          result += span(CLASS.JS_FUNCTION, escapeHTML(word));
+          command = false;
+        }
+      }
+    }
+
+    return result;
+  };
+
+  return commands();
+};
+
+const LANGUAGE_SIGNALS = {
+  python:
+    /^\s*(?:from\s+[\w.]+\s+import\s|import\s+[\w.]+(?:\s+as\s+\w+)?(?:\s*,\s*[\w.]+)*\s*$|def\s+\w+\s*\(|class\s+\w+.*:\s*$|(?:if|elif|while|for|with|except)\b.*:\s*(?:#.*)?$|(?:else|try|finally):|print\(|raise\s)/,
+  shell:
+    /^(?!.*:\s*$)(?!\s*(?:from|import)\s)(?!\s*[\w.[\]]+\s*[-+*/]?=\s)\s*(?:[a-z][\w.-]*(?=[^\n]*\s(?:-{1,2}\w|[\w@~.-]*[./][\w./-]|\$|\||&&|\d?>|["']|\\$))(?:\s+\S+)+|[A-Za-z_]\w*=(?:[^\s,]*|"[^"]*"|'[^']*'|\$\([^)]*\)?)(?:;|\s*$|\s+[a-z])|(?:if|then|fi|for|do|done|case|esac|while|echo|printf|export)\b|\[\s|\((?:cd|[a-z]+\s))/,
+  css: /^\s*(?:-{0,2}[a-zA-Z][\w-]*\s*:[^;{]*;|--[\w-]+\s*(?:,|$)|(?:[^{};()=[\]'"]|\[[^\]]*\]|:[\w-]+\([^)]*\))+\{(?:[^{}]*\})?\s*(?:\/\*.*)?$)/,
+  js: /^\s*(?:(?:const|let|var)\s+[\w{[$]|(?:async\s+)?function\b|import\b.*\bfrom\s*['"]|import\s*['"{*]|export\s|return\b.*;|\/\/|(?:window|document|console)\.|\$\.\w)|=>|[^;];\s*$/,
+  html: /^\s*<[!/a-zA-Z]|<\/[a-zA-Z][\w-]*>|@\[/,
+};
+
+export const detectLanguage = (code) => {
+  if (/^\s*(?:[{[][\s\S]*"[^"\n]*"\s*:|"[^"\n]*"\s*:)/.test(code)) return 'json';
+  if (/^\s*<[!/a-zA-Z]/.test(code)) return 'html';
+
+  const lines = code.split('\n');
+  return Object.entries(LANGUAGE_SIGNALS)
+    .map(([language, signal]) => [language, lines.filter((line) => signal.test(line)).length])
+    .reduce((best, entry) => (entry[1] > best[1] ? entry : best), ['text', 0])[0];
+};
+
+const HIGHLIGHTERS = {
+  html: (code, options) => highlightHTML(escapeHTML(code), options),
+  json: (code) => highlightJSON(escapeHTML(code)),
+  css: (code) => highlightCSS(escapeHTML(code)),
+  js: highlightJSRaw,
+  python: highlightPython,
+  shell: highlightShell,
+  text: escapeHTML,
+};
+
+export const highlight = (code, language, options) =>
+  HIGHLIGHTERS[language ?? detectLanguage(code)](code, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/codie",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Modular code display and editing package",
   "type": "module",
   "main": "codie.js",

package/theme.css

@@ -50,12 +50,12 @@
   --codie-highlight: oklch(0.7 0.1 250 / 0.2);
 }
 
-/* Dark theme - VSCode Dark+ */
+/* Dark theme - VSCode Dark+ tokens on Stylecheat's dark surface */
 .dark :where(codie, [codie]),
 [dark] :where(codie, [codie]),
 :where(codie, [codie])[dark] {
-  --codie-bg: #1e1e1e;
-  --codie-text: #d4d4d4;
+  --codie-bg: #15181d;
+  --codie-text: #dfe6f0;
   --codie-caret: #fff;
   --codie-selection: oklch(0.5 0.1 250 / 0.4);
 
@@ -63,7 +63,7 @@
   --codie-tag: #569cd6;
   --codie-attr-name: #9cdcfe;
   --codie-attr-value: #ce9178;
-  --codie-punct: #808080;
+  --codie-punct: #8a94a6;
   --codie-comment: #6a9955;
 
   /* CSS tokens */
@@ -90,11 +90,11 @@
   --codie-vibe: #db2777;
 
   /* Line numbers */
-  --codie-line-number: oklch(0.45 0 0);
-  --codie-line-number-active: oklch(0.75 0 0);
+  --codie-line-number: oklch(0.45 0.02 264);
+  --codie-line-number-active: oklch(0.75 0.02 264);
 
   /* Folding */
-  --codie-fold-icon: oklch(0.45 0 0);
+  --codie-fold-icon: oklch(0.45 0.02 264);
   --codie-fold-hover: oklch(0.4 0.1 250 / 0.3);
 
   /* Line highlight */