diff --git a/frontend/components/CellInput.js b/frontend/components/CellInput.js
index 50d4a5c969..d3a88150b2 100644
--- a/frontend/components/CellInput.js
+++ b/frontend/components/CellInput.js
@@ -95,103 +95,103 @@ window.PLUTO_TOGGLE_CM_AUTOCOMPLETE_ON_TYPE = (val = !ENABLE_CM_AUTOCOMPLETE_ON_
 }
 
 const common_style_tags = [
-    { tag: tags.comment,        color: "var(--cm-color-comment)", fontStyle: "italic", filter: "none" },
-    { tag: tags.keyword,        color: "var(--cm-color-keyword)" },
-    { tag: tags.variableName,   color: "var(--cm-color-var)", fontWeight: 700 },
-    { tag: tags.typeName,       color: "var(--cm-color-type)", fontStyle: "italic" },
-    { tag: tags.typeOperator,   color: "var(--cm-color-type)", fontStyle: "italic" },
-    { tag: tags.tagName,        color: "var(--cm-color-tag)" }, // JS
-    { tag: tags.propertyName,   color: "var(--cm-color-property)" },
+    { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic", filter: "none" },
+    { tag: tags.keyword, color: "var(--cm-color-keyword)" },
+    { tag: tags.variableName, color: "var(--cm-color-var)", fontWeight: 700 },
+    { tag: tags.typeName, color: "var(--cm-color-type)", fontStyle: "italic" },
+    { tag: tags.typeOperator, color: "var(--cm-color-type)", fontStyle: "italic" },
+    { tag: tags.tagName, color: "var(--cm-color-tag)" }, // JS
+    { tag: tags.propertyName, color: "var(--cm-color-property)" },
     // TODO: tags.labelName
-    { tag: tags.macroName,      color: "var(--cm-color-macro)", fontWeight: 700 },
-    { tag: tags.string,         color: "var(--cm-color-string)" },
+    { tag: tags.macroName, color: "var(--cm-color-macro)", fontWeight: 700 },
+    { tag: tags.string, color: "var(--cm-color-string)" },
     // TODO: tags.character
-    { tag: tags.number,         color: "var(--cm-color-number)" },
-    { tag: tags.bool,           color: "var(--cm-color-builtin)", fontWeight: 700 },
+    { tag: tags.number, color: "var(--cm-color-number)" },
+    { tag: tags.bool, color: "var(--cm-color-builtin)", fontWeight: 700 },
     // TODO: tags.escape
     // TODO: tags.self, tags.null
-    { tag: tags.atom,           color: "var(--cm-color-atom)" },
-    { tag: tags.unit,           color: "var(--cm-color-tag)" }, // TODO: Remove
+    { tag: tags.atom, color: "var(--cm-color-atom)" },
+    { tag: tags.unit, color: "var(--cm-color-tag)" }, // TODO: Remove
     // TODO? tags.operator
-    { tag: tags.bracket,        color: "var(--cm-color-bracket)" },
+    { tag: tags.bracket, color: "var(--cm-color-bracket)" },
     { tag: tags.special(tags.brace), color: "var(--cm-color-macro)", fontWeight: 700 }, // interp
 ]
 
-export const pluto_syntax_colors_julia = HighlightStyle.define(
-    common_style_tags,
+export const pluto_syntax_colors_julia = HighlightStyle.define(common_style_tags, {
+    all: { color: `var(--cm-color-editor-text)` },
+    scope: julia_andrey().language,
+})
+
+export const pluto_syntax_colors_javascript = HighlightStyle.define(common_style_tags, {
+    all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
+    scope: javascriptLanguage,
+})
+
+export const pluto_syntax_colors_python = HighlightStyle.define(common_style_tags, {
+    all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
+    scope: pythonLanguage,
+})
+
+export const pluto_syntax_colors_css = HighlightStyle.define(
+    [
+        { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
+        { tag: tags.variableName, color: "var(--cm-color-css-accent)", fontWeight: 700 },
+        { tag: tags.propertyName, color: "var(--cm-color-css-accent)", fontWeight: 700 },
+        { tag: tags.tagName, color: "var(--cm-color-css)", fontWeight: 700 },
+        //{ tag: tags.className,          color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
+        //{ tag: tags.constant(tags.className), color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
+        { tag: tags.definitionOperator, color: "var(--cm-color-css)" },
+        { tag: tags.keyword, color: "var(--cm-color-css)" },
+        { tag: tags.modifier, color: "var(--cm-color-css-accent)" },
+        { tag: tags.literal, color: "var(--cm-color-css)" },
+        // { tag: tags.unit,              color: "var(--cm-color-css-accent)" },
+        { tag: tags.punctuation, opacity: 0.5 },
+    ],
     {
-        all: { color: `var(--cm-color-editor-text)` },
-        scope: julia_andrey().language,
+        scope: cssLanguage,
+        all: { color: "var(--cm-color-css)" },
     }
 )
 
-export const pluto_syntax_colors_javascript = HighlightStyle.define(
-    common_style_tags,
+export const pluto_syntax_colors_html = HighlightStyle.define(
+    [
+        { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
+        { tag: tags.content, color: "var(--cm-color-html)", fontWeight: 400 },
+        { tag: tags.tagName, color: "var(--cm-color-html-accent)", fontWeight: 600 },
+        { tag: tags.documentMeta, color: "var(--cm-color-html-accent)" },
+        { tag: tags.attributeName, color: "var(--cm-color-html-accent)", fontWeight: 600 },
+        { tag: tags.attributeValue, color: "var(--cm-color-html-accent)" },
+        { tag: tags.angleBracket, color: "var(--cm-color-html-accent)", fontWeight: 600, opacity: 0.7 },
+    ],
     {
-        all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
-        scope: javascriptLanguage,
+        all: { color: "var(--cm-color-html)" },
+        scope: htmlLanguage,
     }
 )
 
-export const pluto_syntax_colors_python = HighlightStyle.define(
-    common_style_tags,
+// https://github.com/lezer-parser/markdown/blob/d4de2b03180ced4610bad9cef0ad3a805c43b63a/src/markdown.ts#L1890
+export const pluto_syntax_colors_markdown = HighlightStyle.define(
+    [
+        { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
+        { tag: tags.content, color: "var(--cm-color-md)" },
+        { tag: tags.heading, color: "var(--cm-color-md)", fontWeight: 700 },
+        // TODO? tags.list
+        { tag: tags.quote, color: "var(--cm-color-md)" },
+        { tag: tags.emphasis, fontStyle: "italic" },
+        { tag: tags.strong, fontWeight: "bolder" },
+        { tag: tags.link, textDecoration: "underline" },
+        { tag: tags.url, color: "var(--cm-color-md)", textDecoration: "none" },
+        { tag: tags.monospace, color: "var(--cm-color-md-accent)" },
+
+        // Marks: `-` for lists, `#` for headers, etc.
+        { tag: tags.processingInstruction, color: "var(--cm-color-md-accent) !important", opacity: "0.5" },
+    ],
     {
-        all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
-        scope: pythonLanguage,
+        all: { color: "var(--cm-color-md)" },
+        scope: markdownLanguage,
     }
 )
 
-export const pluto_syntax_colors_css = HighlightStyle.define([
-    { tag: tags.comment,            color: "var(--cm-color-comment)", fontStyle: "italic" },
-    { tag: tags.variableName,       color: "var(--cm-color-css-accent)", fontWeight: 700 },
-    { tag: tags.propertyName,       color: "var(--cm-color-css-accent)", fontWeight: 700 },
-    { tag: tags.tagName,            color: "var(--cm-color-css)", fontWeight: 700 },
-    //{ tag: tags.className,          color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
-    //{ tag: tags.constant(tags.className), color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
-    { tag: tags.definitionOperator, color: "var(--cm-color-css)" },
-    { tag: tags.keyword,            color: "var(--cm-color-css)" },
-    { tag: tags.modifier,           color: "var(--cm-color-css-accent)" },
-    { tag: tags.literal,            color: "var(--cm-color-css)" },
-    // { tag: tags.unit,              color: "var(--cm-color-css-accent)" },
-    { tag: tags.punctuation,        opacity: 0.5 },
-], {
-    scope: cssLanguage,
-    all: { color: "var(--cm-color-css)" },
-})
-
-export const pluto_syntax_colors_html = HighlightStyle.define([
-    { tag: tags.comment,        color: "var(--cm-color-comment)", fontStyle: "italic" },
-    { tag: tags.content,        color: "var(--cm-color-html)", fontWeight: 400 },
-    { tag: tags.tagName,        color: "var(--cm-color-html-accent)", fontWeight: 600 },
-    { tag: tags.documentMeta,   color: "var(--cm-color-html-accent)" },
-    { tag: tags.attributeName,  color: "var(--cm-color-html-accent)", fontWeight: 600 },
-    { tag: tags.attributeValue, color: "var(--cm-color-html-accent)" },
-    { tag: tags.angleBracket,   color: "var(--cm-color-html-accent)", fontWeight: 600, opacity: 0.7 },
-], {
-    all: { color: "var(--cm-color-html)" },
-    scope: htmlLanguage,
-})
-
-// https://github.com/lezer-parser/markdown/blob/d4de2b03180ced4610bad9cef0ad3a805c43b63a/src/markdown.ts#L1890
-export const pluto_syntax_colors_markdown = HighlightStyle.define([
-    { tag: tags.comment,    color: "var(--cm-color-comment)", fontStyle: "italic" },
-    { tag: tags.content,    color: "var(--cm-color-md)" },
-    { tag: tags.heading,    color: "var(--cm-color-md)", fontWeight: 700 },
-    // TODO? tags.list
-    { tag: tags.quote,      color: "var(--cm-color-md)" },
-    { tag: tags.emphasis,   fontStyle: "italic" },
-    { tag: tags.strong,     fontWeight: "bolder" },
-    { tag: tags.link,       textDecoration: "underline" },
-    { tag: tags.url,        color: "var(--cm-color-md)", textDecoration: "none" },
-    { tag: tags.monospace,  color: "var(--cm-color-md-accent)" },
-
-    // Marks: `-` for lists, `#` for headers, etc.
-    { tag: tags.processingInstruction, color: "var(--cm-color-md-accent) !important", opacity: "0.5" },
-], {
-    all: { color: "var(--cm-color-md)" },
-    scope: markdownLanguage,
-})
-
 const getValue6 = (/** @type {EditorView} */ cm) => cm.state.doc.toString()
 const setValue6 = (/** @type {EditorView} */ cm, value) =>
     cm.dispatch({
@@ -911,11 +911,16 @@ const InputContextMenu = ({ on_delete, cell_id, run_cell, skip_as_script, runnin
             })
     }
 
-    useEventListener(window, "keydown", (/** @type {KeyboardEvent} */ e) => {
-        if (e.key === "Escape") {
-            setOpen(false)
-        }
-    })
+    useEventListener(
+        window,
+        "keydown",
+        (/** @type {KeyboardEvent} */ e) => {
+            if (e.key === "Escape") {
+                setOpen(false)
+            }
+        },
+        []
+    )
 
     return html`
         <button
diff --git a/frontend/components/ExportBanner.js b/frontend/components/ExportBanner.js
index d0a8810e1d..0af73dc1fd 100644
--- a/frontend/components/ExportBanner.js
+++ b/frontend/components/ExportBanner.js
@@ -97,13 +97,16 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
         }
     }, [open, element_ref.current])
 
+    const onCloseRef = useRef(onClose)
+    onCloseRef.current = onClose
+
     useEventListener(
         element_ref.current,
         "focusout",
         () => {
-            if (!element_ref.current?.matches(":focus-within")) onClose()
+            if (!element_ref.current?.matches(":focus-within")) onCloseRef.current()
         },
-        [onClose]
+        []
     )
 
     return html`
diff --git a/frontend/components/FrontmatterInput.js b/frontend/components/FrontmatterInput.js
index e58fdfb570..e278036aa5 100644
--- a/frontend/components/FrontmatterInput.js
+++ b/frontend/components/FrontmatterInput.js
@@ -37,12 +37,16 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
         set_frontmatter(remote_frontmatter ?? {})
         close()
     }
+
+    const set_remote_frontmatter_ref = useRef(set_remote_frontmatter)
+    set_remote_frontmatter_ref.current = set_remote_frontmatter
+
     const submit = useCallback(() => {
-        set_remote_frontmatter(clean_data(frontmatter) ?? {}).then(() =>
-            alert("Frontmatter synchronized ✔\n\nThese parameters will be used in future exports.")
-        )
+        set_remote_frontmatter_ref
+            .current(clean_data(frontmatter) ?? {})
+            .then(() => alert("Frontmatter synchronized ✔\n\nThese parameters will be used in future exports."))
         close()
-    }, [clean_data, set_remote_frontmatter, frontmatter, close])
+    }, [clean_data, frontmatter, close])
 
     useEventListener(window, "open pluto frontmatter", open)
 
@@ -52,7 +56,7 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
         (e) => {
             if (dialog_ref.current != null) if (dialog_ref.current.contains(e.target)) if (e.key === "Enter" && has_ctrl_or_cmd_pressed(e)) submit()
         },
-        [dialog_ref, submit]
+        [submit]
     )
 
     const frontmatter_with_defaults = {