Use highlight.js to color the Python source

kitchen.py

@@ -14,10 +14,10 @@ def cleanup(src):
 def getsource(file):
     def setsource(src):
         src = "\n".join(src.split("\n")[2:])
-        ltk.find(f'textarea[file="{file}"]').val(src)
+        ltk.find(f'code[file="{file}"]').empty().text(src)
 
     ltk.get(file, setsource, "html")
-    return file
+    return f"Loading {file}..."
 
 
 ltk.find("#progress").remove()
@@ -33,12 +33,13 @@ def setsource(src):
         .css("width", "40%")
         .resizable(ltk.to_js({ "handles": "e" })),
         ltk.VBox(
-            ltk.H2("The source:"),
-            ltk.TextArea(getsource(file))
-                .attr("file", file)
-                .css("height", 800)
-                .css("border-width", 0)
-                .css("font-family", "Courier")
+            ltk.Preformatted(
+                ltk.Code("python", getsource(file))
+                    .attr("file", file)
+                    .css("width", "95%")
+            )
+            .css("padding-bottom", 16)
+            .css("height", 770)
         )
         .css("width", "60%")
         .css("padding-left", 24)

ltk/jquery.py

@@ -40,6 +40,8 @@ def number(s):
     return js.parseFloat(s)
 
 def schedule(function, timeout_seconds=0.1):
+    if not function:
+        raise ValueError(f"schedule: Expecting a function, not {function}")
     if function in timers:
         js.clearTimeout(timers[function])
     timers[function] = js.setTimeout(proxy(function), timeout_seconds * 1000)
@@ -53,8 +55,9 @@ def repeat(function, timeout_seconds=1.0):
     js.setInterval(proxy(function), timeout_seconds * 1000)
 
 def get(route, handler, kind="json"):
-    wrapper = proxy(lambda data, *rest: handler(data if isinstance(data, str) else data.to_py()))
-    return jQuery.get(route, wrapper, kind)
+    def wrapper(data, *rest):
+        handler(data if isinstance(data, str) else data.to_py())
+    return jQuery.get(route, proxy(wrapper), kind)
 
 def delete(route, handler):
     wrapper = proxy(lambda data, *rest: handler(data.to_py()))

ltk/widgets.py

@@ -310,31 +310,28 @@ class TextArea(Text):
 
 
 class Code(Widget):
-    """ Wraps a CodeMirror instance """
+    """ Wraps a block of code """
     classes = [ "ltk-code" ]
-    tag = "textarea"
+    tag = "code"
 
     def __init__(self, language, code, style=DEFAULT_CSS):
         Widget.__init__(self, style)
-        inject_script("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js")
-        inject_css("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css")
-        self.element.val(code)
-        schedule(lambda: self.activate(language, code))
-
-    def activate(self, language:str, code:str):
-        """
-        Active this code editor
+        if not hasattr(js, "hljs"):
+            inject_css("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css")
+            inject_script("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js")
+            inject_script(f"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/{language}.min.js")
+        self.element.text(code).css("opacity", 0)
+        schedule(self.highlight)
 
-        Args:
-            language:str: The language to render, such as "Python"
-            code:str: The source to render
-        """
-        js.CodeMirror.fromTextArea(self.element[0], to_js({
-            "value": code,
-            "mode": language,
-        }))
+    def highlight(self):
+        if hasattr(js, "hljs"):
+            js.hljs.highlightAll()
+            self.element.animate(to_js({ "opacity": 1}))
+        else:
+            schedule(self.highlight, 0.1)
 
 
+
 class Image(Widget):
     """ Wraps an <img> """
     classes = [ "ltk-image" ]