Fix: Highlight f-string and vertical shift for code editor.

Author: dylan-sutton-chavez

demo/index.html

@@ -60,7 +60,7 @@ <h1 class="font-semibold">Edge Python Playground</h1>
 
         <section aria-label="Code editor" class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[70] basis-0 overflow-hidden">
             <header class="bg-[#1c1c1c] border-[#2d2d2d] flex justify-between items-center">
-                <div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
+                <div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full border-b border-[#2d2d2d]">
                     <span class="px-3 py-2">
                         <p aria-hidden="true">Editor</p>
                     </span>
@@ -80,7 +80,8 @@ <h1 class="font-semibold">Edge Python Playground</h1>
 
                 <div id="ed"
                     class="no-scrollbar flex-1 p-2 text-[#c2c2c2] overflow-y-auto"
-                    aria-label="Python source code editor"></div>
+                    aria-label="Python source code editor">
+                </div>
             </div>
         </section>
 

demo/main.js

@@ -35,34 +35,41 @@ const BI = new Set([
 ]);
 const LIT = new Set(['True','False','None']);
 
+const WORD_CLS = [
+    [KW, 'tk-kw'],
+    [LIT, 'tk-lit'],
+    [BI, 'tk-bi'],
+];
+
 const TOKEN_RE = /(#[^\n]*)|((?:\b[fFrRbBuU]{1,2})?(?:"""[\s\S]*?"""|'''[\s\S]*?'''|"(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'))|(0[xX][\da-fA-F_]+|0[oO][0-7_]+|0[bB][01_]+|\d[\d_]*(?:\.[\d_]*)?(?:[eE][+-]?\d+)?[jJ]?|\.\d[\d_]*(?:[eE][+-]?\d+)?[jJ]?)|([A-Za-z_]\w*)/g;
 
 const esc = (s) => s.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
-
-const highlight = (src) => {
-    const escaped = esc(src);
-    return escaped.replace(TOKEN_RE, (m, com, str, num, word, offset, fullStr) => {
-        if (com)  return `<span class="tk-com">${com}</span>`;
-        if (str)  return `<span class="tk-str">${str}</span>`;
-        if (num)  return `<span class="tk-num">${num}</span>`;
-        if (word) {        
-            const isEntity = fullStr[offset - 1] === '&' && fullStr[offset + word.length] === ';';
-            if (isEntity) return word;
-
-            if (KW.has(word))  return `<span class="tk-kw">${word}</span>`;
-            if (LIT.has(word)) return `<span class="tk-lit">${word}</span>`;
-            if (BI.has(word))  return `<span class="tk-bi">${word}</span>`;
-
-            const isFunction = /^\s*\(/.test(fullStr.slice(offset + word.length));
-            if (isFunction) {
-                return `<span class="tk-func">${word}</span>`;
-            } else {
-                return `<span class="tk-var">${word}</span>`;
-            }
+const span = (cls, s) => `<span class="${cls}">${s}</span>`;
+
+const tokenize = (m, com, str, num, word, offset, fullStr) => {
+    if (com) return span('tk-com', com);
+    if (str) {
+        if (/^[fFrRbBuU]*[fF]/i.test(str)) {
+            const body = str.replace(/\{\{|\}\}|\{([^{}]*)\}/g, (m, expr) =>
+                expr != null
+                    ? `{${expr.replace(new RegExp(TOKEN_RE.source, TOKEN_RE.flags), tokenize)}}`
+                    : m
+            );
+            return span('tk-str', body);
         }
-        return m;
-    });
+        return span('tk-str', str);
+    }
+    if (num) return span('tk-num', num);
+    if (word) {
+        if (fullStr[offset - 1] === '&' && fullStr[offset + word.length] === ';') return word;
+        for (const [set, cls] of WORD_CLS) if (set.has(word)) return span(cls, word);
+        return span(/^\s*\(/.test(fullStr.slice(offset + word.length)) ? 'tk-func' : 'tk-var', word);
+    }
+    return m;
 };
+
+const highlight = (src) => esc(src).replace(TOKEN_RE, tokenize);
+
 const jar = CodeJar(ed, (editor) => {
     editor.innerHTML = highlight(editor.textContent);
 }, {
@@ -125,7 +132,7 @@ const runCode = async () => {
 const sync = () => {
     const text = jar.toString().replace(/\n$/, '');
     const n = Math.max(1, Math.min(text.split('\n').length, MAX_LINES));
-    ln.textContent = Array.from({ length: n }, (_, i) => String(i + 1).padStart(2, '0')).join('\n');
+    ln.textContent = Array.from({ length: n }, (_, i) => String(i + 1).padStart(2, '00')).join('\n');
     ln.scrollTop = ed.scrollTop;
 };
 

demo/style.css

@@ -8,9 +8,10 @@
 
 #ed {
     tab-size: 4;
-    white-space: pre;
+    white-space: pre !important;
     outline: none;
     font-variant-ligatures: none;
+    overflow-x: auto;
 }
 
 .tk-kw { color: #c586c0; }
@@ -20,4 +21,5 @@
 .tk-str { color: #ce9178; }
 .tk-com { color: #6a9955; font-style: italic; }
 .tk-var { color: #9cdcfe; } 
-.tk-func { color: #dcdcaa; }
+.tk-func { color: #dcdcaa; }
+.tk-fexpr { color: #9cdcfe; }