From 57578be16d822e81c2bc5d5ef897cfa8c96d9613 Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Tue, 17 Mar 2026 08:44:21 +0800
Subject: [PATCH 01/10] feat: make ace editor support custom theme

---
 backend/assets/repl.html                  |  9 ++++++++-
 backend/src/repl.rs                       |  4 ++++
 docs/book.toml                            |  7 ++++---
 frontend/src/components/Editor/Editor.tsx | 11 ++++++++---
 frontend/src/contexts/AppProvider.tsx     |  2 +-
 frontend/src/types/editor.ts              |  2 ++
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/backend/assets/repl.html b/backend/assets/repl.html
index a8796a9..ed3f669 100644
--- a/backend/assets/repl.html
+++ b/backend/assets/repl.html
@@ -1,4 +1,11 @@
-<div class="repl" data-id="{id}" data-readonly="{readonly}" data-lang="{lang}">
+<div
+  class="repl"
+  data-id="{id}"
+  data-readonly="{readonly}"
+  data-lang="{lang}"
+  data-editor-theme="{editor.theme}"
+  data-editor-dark-theme="{editor.darkTheme}"
+>
   <iframe
     class="hide"
     loading="{loading}"
diff --git a/backend/src/repl.rs b/backend/src/repl.rs
index 00e832c..beaca99 100644
--- a/backend/src/repl.rs
+++ b/backend/src/repl.rs
@@ -71,6 +71,8 @@ fn render_repls(content: &str, config: &Config) -> (bool, String) {
             // get the config options
             let enable = cfg::get_config_bool(config, &format!("{}.enable", lang), false);
             let loading = cfg::get_config_string(config, &format!("{}.lazy", lang), "lazy");
+            let editor_theme = cfg::get_config_string(config, "editor.theme", "");
+            let editor_dark_theme = cfg::get_config_string(config, "editor.darkTheme", "");
             let src = cfg::get_config_string(
                 config,
                 "src",
@@ -89,6 +91,8 @@ fn render_repls(content: &str, config: &Config) -> (bool, String) {
                 .replace("{loading}", &loading)
                 .replace("{codeblock}", &codeblock)
                 .replace("{readonly}", if readonly { "true" } else { "false" })
+                .replace("{editor.theme}", &editor_theme)
+                .replace("{editor.darkTheme}", &editor_dark_theme)
         })
         .to_string();
 
diff --git a/docs/book.toml b/docs/book.toml
index ab3dcd2..6d52e4b 100644
--- a/docs/book.toml
+++ b/docs/book.toml
@@ -1,7 +1,6 @@
 [book]
 authors = ["MR-Addict"]
 language = "en"
-multilingual = false
 src = "src"
 title = "mdbook-repl"
 
@@ -50,7 +49,9 @@ copy-js = true
 command = "backend/target/release/mdbook-repl"
 
 # iframe url, default is https://mr-addict.github.io/mdbook-repl/embed/
-src = "https://mr-addict.github.io/mdbook-repl/embed/"
+src = "http://localhost:5173/"
+editor.theme = "textmate"
+editor.darkTheme = "textmate"
 
 # python is disabled by default and loading is lazy
 python.enable = true
@@ -65,4 +66,4 @@ javascript.enable = true
 javascript.loading = "lazy"
 
 lua.enable = true
-lua.loading = "lazy"
\ No newline at end of file
+lua.loading = "lazy"
diff --git a/frontend/src/components/Editor/Editor.tsx b/frontend/src/components/Editor/Editor.tsx
index a5a6ff6..6733e3a 100644
--- a/frontend/src/components/Editor/Editor.tsx
+++ b/frontend/src/components/Editor/Editor.tsx
@@ -1,10 +1,10 @@
 import AceEditor from "react-ace";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
+import "ace-builds/src-noconflict/mode-lua";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/mode-typescript";
 import "ace-builds/src-noconflict/mode-javascript";
-import "ace-builds/src-noconflict/mode-lua";
 import "ace-builds/src-noconflict/theme-monokai";
 
 import style from "./Editor.module.css";
@@ -27,6 +27,11 @@ const defaultOptions = {
 export default function Editor() {
   const { outputs, editor, setEditor, execuateCode, clearOutput } = useAppContext();
 
+  const theme = useMemo(() => {
+    if (editor.theme === "light") return editor.editorTheme ?? "textmate";
+    return editor.editorDarkTheme ?? "monokai";
+  }, [editor.theme, editor.editorTheme, editor.editorDarkTheme]);
+
   // listen ctrl + r
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -50,6 +55,7 @@ export default function Editor() {
       <Buttons />
       <AceEditor
         width="100%"
+        theme={theme}
         name={editor.lang}
         mode={editor.lang}
         value={editor.code}
@@ -58,7 +64,6 @@ export default function Editor() {
         defaultValue={editor.defaultCode}
         setOptions={{ useWorker: false }}
         tabSize={editor.lang === "python" ? 4 : 2}
-        theme={editor.theme === "light" ? "textmate" : "monokai"}
         onChange={(code) => setEditor({ ...editor, code })}
         {...defaultOptions}
       />
diff --git a/frontend/src/contexts/AppProvider.tsx b/frontend/src/contexts/AppProvider.tsx
index a74edec..3d30824 100644
--- a/frontend/src/contexts/AppProvider.tsx
+++ b/frontend/src/contexts/AppProvider.tsx
@@ -10,7 +10,7 @@ const workers = {
   python: new URL("../workers/python-worker.js", import.meta.url).toString(),
   typescript: new URL("../workers/typescript-worker.js", import.meta.url).toString(),
   javascript: new URL("../workers/javascript-worker.js", import.meta.url).toString(),
-  lua: new URL("../workers/lua-worker.js", import.meta.url).toString(),
+  lua: new URL("../workers/lua-worker.js", import.meta.url).toString()
 };
 
 const defaultOutputs: OutputsType = {
diff --git a/frontend/src/types/editor.ts b/frontend/src/types/editor.ts
index 2f16ebe..12a4cbe 100644
--- a/frontend/src/types/editor.ts
+++ b/frontend/src/types/editor.ts
@@ -9,6 +9,8 @@ const Editor = z.object({
   code: z.string(),
   defaultCode: z.string(),
   theme: z.enum(["dark", "light"]),
+  editorTheme: z.string().optional(),
+  editorDarkTheme: z.string().optional(),
   readonly: z.boolean()
 });
 

From 286d9dcad70b921a923bca3032aa84fa1dfd35d9 Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Tue, 17 Mar 2026 18:36:23 +0800
Subject: [PATCH 02/10] feat: add support for custom editor themes and optimize
 build configuration

---
 backend/assets/script.html                |  4 +-
 docs/book.toml                            |  4 +-
 frontend/src/components/Editor/Editor.tsx | 52 ++++++++++++++++++++++-
 frontend/vite.config.ts                   | 11 +++++
 4 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/backend/assets/script.html b/backend/assets/script.html
index 8ec03a7..d741888 100644
--- a/backend/assets/script.html
+++ b/backend/assets/script.html
@@ -6,6 +6,8 @@
     const lang = replElement.getAttribute("data-lang");
     const code = getCode(replElement.nextElementSibling);
     const readonly = replElement.getAttribute("data-readonly") === "true";
+    const editorTheme = replElement.getAttribute("data-edit-theme") ?? "";
+    const editorDarkTheme = replElement.getAttribute("data-editor-dark-theme") ?? "";
     let theme = mapTheme(localStorage.getItem("mdbook-theme") || document.querySelector(".theme.theme-selected")?.id);
     const postmessage = (msg) => iframeElement.contentWindow.postMessage({ repl: msg }, "*");
     function mapTheme(bookTheme) {
@@ -22,7 +24,7 @@
       if (event.source === window || !repl) return;
       // if the id is empty, then it's the first time the iframe is loaded
       if (repl.id === "") {
-        postmessage({ id, editor: { theme, lang, code, readonly, defaultCode: code } });
+        postmessage({ id, editor: { theme, editorTheme, editorDarkTheme, lang, code, readonly, defaultCode: code } });
         return;
       }
       if (repl.id !== id) return;
diff --git a/docs/book.toml b/docs/book.toml
index 6d52e4b..84203fc 100644
--- a/docs/book.toml
+++ b/docs/book.toml
@@ -49,9 +49,7 @@ copy-js = true
 command = "backend/target/release/mdbook-repl"
 
 # iframe url, default is https://mr-addict.github.io/mdbook-repl/embed/
-src = "http://localhost:5173/"
-editor.theme = "textmate"
-editor.darkTheme = "textmate"
+src = "https://mr-addict.github.io/mdbook-repl/embed/"
 
 # python is disabled by default and loading is lazy
 python.enable = true
diff --git a/frontend/src/components/Editor/Editor.tsx b/frontend/src/components/Editor/Editor.tsx
index 6733e3a..bfb380b 100644
--- a/frontend/src/components/Editor/Editor.tsx
+++ b/frontend/src/components/Editor/Editor.tsx
@@ -5,7 +5,55 @@ import "ace-builds/src-noconflict/mode-lua";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/mode-typescript";
 import "ace-builds/src-noconflict/mode-javascript";
+
+import "ace-builds/src-noconflict/theme-ambiance";
+import "ace-builds/src-noconflict/theme-chaos";
+import "ace-builds/src-noconflict/theme-chrome";
+import "ace-builds/src-noconflict/theme-cloud9_day";
+import "ace-builds/src-noconflict/theme-cloud9_night";
+import "ace-builds/src-noconflict/theme-cloud9_night_low_color";
+import "ace-builds/src-noconflict/theme-cloud_editor";
+import "ace-builds/src-noconflict/theme-cloud_editor_dark";
+import "ace-builds/src-noconflict/theme-clouds";
+import "ace-builds/src-noconflict/theme-clouds_midnight";
+import "ace-builds/src-noconflict/theme-cobalt";
+import "ace-builds/src-noconflict/theme-crimson_editor";
+import "ace-builds/src-noconflict/theme-dawn";
+import "ace-builds/src-noconflict/theme-dracula";
+import "ace-builds/src-noconflict/theme-dreamweaver";
+import "ace-builds/src-noconflict/theme-eclipse";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-github_dark";
+import "ace-builds/src-noconflict/theme-github_light_default";
+import "ace-builds/src-noconflict/theme-gob";
+import "ace-builds/src-noconflict/theme-gruvbox";
+import "ace-builds/src-noconflict/theme-gruvbox_dark_hard";
+import "ace-builds/src-noconflict/theme-gruvbox_light_hard";
+import "ace-builds/src-noconflict/theme-idle_fingers";
+import "ace-builds/src-noconflict/theme-iplastic";
+import "ace-builds/src-noconflict/theme-katzenmilch";
+import "ace-builds/src-noconflict/theme-kr_theme";
+import "ace-builds/src-noconflict/theme-kuroir";
+import "ace-builds/src-noconflict/theme-merbivore";
+import "ace-builds/src-noconflict/theme-merbivore_soft";
+import "ace-builds/src-noconflict/theme-mono_industrial";
 import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-nord_dark";
+import "ace-builds/src-noconflict/theme-one_dark";
+import "ace-builds/src-noconflict/theme-pastel_on_dark";
+import "ace-builds/src-noconflict/theme-solarized_dark";
+import "ace-builds/src-noconflict/theme-solarized_light";
+import "ace-builds/src-noconflict/theme-sqlserver";
+import "ace-builds/src-noconflict/theme-terminal";
+import "ace-builds/src-noconflict/theme-textmate";
+import "ace-builds/src-noconflict/theme-tomorrow";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+import "ace-builds/src-noconflict/theme-tomorrow_night_blue";
+import "ace-builds/src-noconflict/theme-tomorrow_night_bright";
+import "ace-builds/src-noconflict/theme-tomorrow_night_eighties";
+import "ace-builds/src-noconflict/theme-twilight";
+import "ace-builds/src-noconflict/theme-vibrant_ink";
+import "ace-builds/src-noconflict/theme-xcode";
 
 import style from "./Editor.module.css";
 import Buttons from "./Buttons/Buttons";
@@ -28,8 +76,8 @@ export default function Editor() {
   const { outputs, editor, setEditor, execuateCode, clearOutput } = useAppContext();
 
   const theme = useMemo(() => {
-    if (editor.theme === "light") return editor.editorTheme ?? "textmate";
-    return editor.editorDarkTheme ?? "monokai";
+    if (editor.theme === "light") return editor.editorTheme || "textmate";
+    return editor.editorDarkTheme || "monokai";
   }, [editor.theme, editor.editorTheme, editor.editorDarkTheme]);
 
   // listen ctrl + r
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 225f8bd..c487e12 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -25,5 +25,16 @@ export default defineConfig({
         return `_${name}_${hash}_${lineNumber}`;
       }
     }
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules/react-ace")) return "react-ace";
+          else if (id.includes("node_modules/ace-builds/src-noconflict/mode")) return "ace-modes";
+          else if (id.includes("node_modules/ace-builds/src-noconflict/theme")) return "ace-themes";
+        }
+      }
+    }
   }
 });

From 78d37e49be42825082d3a202c5bfeb293a617cd0 Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Wed, 18 Mar 2026 08:21:25 +0800
Subject: [PATCH 03/10] feat: add editor theme configuration and update usage
 documentation

---
 backend/src/repl.rs                       | 2 +-
 docs/book.toml                            | 2 ++
 docs/src/usage.md                         | 9 +++++++--
 frontend/src/components/Editor/Editor.tsx | 2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/backend/src/repl.rs b/backend/src/repl.rs
index beaca99..74eea59 100644
--- a/backend/src/repl.rs
+++ b/backend/src/repl.rs
@@ -47,7 +47,7 @@ fn map_lang(raw_lang: &str) -> &str {
 
 fn render_repls(content: &str, config: &Config) -> (bool, String) {
     // \r? is for windows line endings
-    let langs = r"\bpy\b|\bpython\b|\bts\b|\btypescript\b|\bjs\b|\bjavascript\b|\blua\b|\blua\b";
+    let langs = r"\bpy\b|\bpython\b|\bts\b|\btypescript\b|\bjs\b|\bjavascript\b|\blua\b";
     let re = Regex::new(&format!(r"(?s)```({}),?(.*?)\r?\n(.*?)```", langs)).unwrap();
 
     // if there are no matches, return the content as is
diff --git a/docs/book.toml b/docs/book.toml
index 84203fc..e5d3dea 100644
--- a/docs/book.toml
+++ b/docs/book.toml
@@ -50,6 +50,8 @@ command = "backend/target/release/mdbook-repl"
 
 # iframe url, default is https://mr-addict.github.io/mdbook-repl/embed/
 src = "https://mr-addict.github.io/mdbook-repl/embed/"
+editor.theme = "textmate"
+editor.darkTheme = "monokai"
 
 # python is disabled by default and loading is lazy
 python.enable = true
diff --git a/docs/src/usage.md b/docs/src/usage.md
index 349dbce..9c0236c 100644
--- a/docs/src/usage.md
+++ b/docs/src/usage.md
@@ -28,6 +28,8 @@ After installation, you need to add some configurations to your **book.toml** fi
 [preprocessor.repl]
 # iframe url, default is https://mr-addict.github.io/mdbook-repl/embed/
 src = "https://mr-addict.github.io/mdbook-repl/embed/"
+editor.theme = "textmate"
+editor.darkTheme = "monokai"
 
 # python is disabled by default and loading is lazy
 python.enable = true
@@ -43,8 +45,10 @@ javascript.loading = "lazy"
 ```
 
 - **src**: The url of the repl iframe, the default value is [https://mr-addict.github.io/mdbook-repl/embed/](https://mr-addict.github.io/mdbook-repl/embed/). You can also deploy your own repl server for better performance, see [For Developers](for-developers.md) section.
-- **language.enable**: Enable the language for the repl, default value is **false**.
-- **language.loading**: The loading of the language, can be **eager** or **lazy**, default value is **lazy**.
+- **editor.theme**: The theme of the code editor, the default value is **textmate**.
+- **editor.darkTheme**: The theme of the code editor in dark mode when **editor.theme** is **not** set, the default value is **monokai**.
+- **[language].enable**: Enable the language for the repl, default value is **false**.
+- **[language].loading**: The loading of the language, can be **eager** or **lazy**, default value is **lazy**.
 
 For example if you only care about python codeblock, you can only enable python and disable the others:
 
@@ -111,6 +115,7 @@ Here is the full list of extensions:
 | Python     | python, py     |
 | TypeScript | typescript, ts |
 | JavaScript | javascript, js |
+| Lua        | lua            |
 
 ## Performance
 
diff --git a/frontend/src/components/Editor/Editor.tsx b/frontend/src/components/Editor/Editor.tsx
index bfb380b..713b9c4 100644
--- a/frontend/src/components/Editor/Editor.tsx
+++ b/frontend/src/components/Editor/Editor.tsx
@@ -77,7 +77,7 @@ export default function Editor() {
 
   const theme = useMemo(() => {
     if (editor.theme === "light") return editor.editorTheme || "textmate";
-    return editor.editorDarkTheme || "monokai";
+    return editor.editorDarkTheme || editor.editorTheme || "monokai";
   }, [editor.theme, editor.editorTheme, editor.editorDarkTheme]);
 
   // listen ctrl + r

From e7ad95f33474f17bf1918593aaf14b0f0cff92f2 Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Wed, 18 Mar 2026 08:41:15 +0800
Subject: [PATCH 04/10] refactor: improve formatting and readability of
 lua-worker.js

---
 frontend/src/workers/lua-worker.js | 44 +++++++++++++++++-------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/frontend/src/workers/lua-worker.js b/frontend/src/workers/lua-worker.js
index 1946f9b..ddf86a9 100644
--- a/frontend/src/workers/lua-worker.js
+++ b/frontend/src/workers/lua-worker.js
@@ -5,7 +5,9 @@ const factory = new wasmoon.LuaFactory();
 const postmessage = (status, msg) => self.postMessage({ lang: "lua", output: { status, data: msg } });
 
 const stderr = (...msg) => postmessage("running", [{ color: "red", msg }]);
-const stdout = (...msg) => { if (msg.length) postmessage("running", [{ color: "normal", msg }]);};
+const stdout = (...msg) => {
+  if (msg.length) postmessage("running", [{ color: "normal", msg }]);
+};
 
 async function waitWasmoonReady() {
   postmessage("idle", []);
@@ -21,37 +23,41 @@ self.onmessage = async (event) => {
   // add all the context to the worker
   for (const key of Object.keys(context)) self[key] = context[key];
 
-  const lua = await factory.createEngine()
-  try{
-    lua.global.set('print', wasmoon.decorateFunction((thread, argsQuantity) => {
-        const values = [];
-        for (let i = 1; i <= argsQuantity; i++) {
+  const lua = await factory.createEngine();
+  try {
+    lua.global.set(
+      "print",
+      wasmoon.decorateFunction(
+        (thread, argsQuantity) => {
+          const values = [];
+          for (let i = 1; i <= argsQuantity; i++) {
             values.push(thread.indexToString(i));
+          }
+          stdout(...values.map(String));
+        },
+        {
+          receiveArgsQuantity: true,
+          receiveThread: true
         }
-        stdout(...values.map(String));
-    }, {
-        receiveArgsQuantity: true,
-        receiveThread: true
-    }));
+      )
+    );
 
-    await lua.global.set('error', (...args) => {
+    await lua.global.set("error", (...args) => {
       stderr(...args.map(String));
     });
 
     if (!code) postmessage("finished", [{ color: "red", msg: "lua code is empty" }]);
     else {
       try {
-          await lua.doString(code);
-          postmessage("finished", []);
+        await lua.doString(code);
+        postmessage("finished", []);
       } catch (err) {
-          postmessage("finished", [{ color: "red", msg: [err.message] }]);
+        postmessage("finished", [{ color: "red", msg: [err.message] }]);
       }
     }
-  }
-  catch(e){
+  } catch (e) {
     stderr(e.toString());
-  }
-  finally{
+  } finally {
     lua.global.close();
     postmessage("finished", []);
   }

From 87fb1bac8ae3aef014e878021d6afdbdcf5fc73c Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Wed, 18 Mar 2026 22:11:41 +0800
Subject: [PATCH 05/10] fix: update iframe URL and enhance editor theme
 configuration in documentation

---
 backend/src/repl.rs        |  2 +-
 docs/book.toml             |  4 ++--
 docs/src/for-developers.md |  2 +-
 docs/src/usage.md          | 12 ++++++------
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/backend/src/repl.rs b/backend/src/repl.rs
index 74eea59..2a86683 100644
--- a/backend/src/repl.rs
+++ b/backend/src/repl.rs
@@ -76,7 +76,7 @@ fn render_repls(content: &str, config: &Config) -> (bool, String) {
             let src = cfg::get_config_string(
                 config,
                 "src",
-                "https://mr-addict.github.io/mdbook-repl/embed/",
+                "https://mr-addict.github.io/mdbook-repl/embed",
             );
 
             // if norepl is in the options, return the code block as is
diff --git a/docs/book.toml b/docs/book.toml
index e5d3dea..dcf1de0 100644
--- a/docs/book.toml
+++ b/docs/book.toml
@@ -48,8 +48,8 @@ copy-js = true
 [preprocessor.repl]
 command = "backend/target/release/mdbook-repl"
 
-# iframe url, default is https://mr-addict.github.io/mdbook-repl/embed/
-src = "https://mr-addict.github.io/mdbook-repl/embed/"
+# iframe url and editor theme settings
+src = "https://mr-addict.github.io/mdbook-repl/embed"
 editor.theme = "textmate"
 editor.darkTheme = "monokai"
 
diff --git a/docs/src/for-developers.md b/docs/src/for-developers.md
index d02d0bd..682efec 100644
--- a/docs/src/for-developers.md
+++ b/docs/src/for-developers.md
@@ -4,7 +4,7 @@ Actually, you can use repl in your own web project other than **mdbook**. What *
 
 The core of **mdbook-repl** is the iframe. The iframe is used to display the output of the code. The js and css are used to communicate with the iframe.
 
-The iframe url is [https://mr-addict.github.io/mdbook-repl/embed/](https://mr-addict.github.io/mdbook-repl/embed/). You can also deploy the iframe in your own server. You can find the source code of the iframe in the [github repository](https://github.com/MR-Addict/mdbook-repl/tree/gh-pages/embed).
+The iframe url is [https://mr-addict.github.io/mdbook-repl/embed](https://mr-addict.github.io/mdbook-repl/embed). You can also deploy the iframe in your own server. You can find the source code of the iframe in the [github repository](https://github.com/MR-Addict/mdbook-repl/tree/gh-pages/embed).
 
 ## API
 
diff --git a/docs/src/usage.md b/docs/src/usage.md
index 9c0236c..05773f1 100644
--- a/docs/src/usage.md
+++ b/docs/src/usage.md
@@ -26,8 +26,8 @@ After installation, you need to add some configurations to your **book.toml** fi
 
 ```toml
 [preprocessor.repl]
-# iframe url, default is https://mr-addict.github.io/mdbook-repl/embed/
-src = "https://mr-addict.github.io/mdbook-repl/embed/"
+# iframe url and editor theme settings
+src = "https://mr-addict.github.io/mdbook-repl/embed"
 editor.theme = "textmate"
 editor.darkTheme = "monokai"
 
@@ -44,11 +44,11 @@ javascript.enable = true
 javascript.loading = "lazy"
 ```
 
-- **src**: The url of the repl iframe, the default value is [https://mr-addict.github.io/mdbook-repl/embed/](https://mr-addict.github.io/mdbook-repl/embed/). You can also deploy your own repl server for better performance, see [For Developers](for-developers.md) section.
+- **[language].enable**: Enable the language for the repl, the default value is **false**.
+- **[language].loading**: The loading of the language, can be **eager** or **lazy**, the default value is **lazy**.
+- **src**: The url of the repl iframe, the default value is https://mr-addict.github.io/mdbook-repl/embed. You can also deploy your own repl server for better performance, see [For Developers](for-developers.md) section.
 - **editor.theme**: The theme of the code editor, the default value is **textmate**.
-- **editor.darkTheme**: The theme of the code editor in dark mode when **editor.theme** is **not** set, the default value is **monokai**.
-- **[language].enable**: Enable the language for the repl, default value is **false**.
-- **[language].loading**: The loading of the language, can be **eager** or **lazy**, default value is **lazy**.
+- **editor.darkTheme**: The theme of the code editor in dark mode, if not specified, it will use the value of **editor.theme**, otherswise the default value is **monokai**.
 
 For example if you only care about python codeblock, you can only enable python and disable the others:
 

From 946350737253a4af03b1d02e4a2e4ae1d185224b Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Wed, 18 Mar 2026 22:15:42 +0800
Subject: [PATCH 06/10] feat: enable Lua support with lazy loading in
 configuration

---
 docs/book.toml    |  1 +
 docs/src/usage.md | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/book.toml b/docs/book.toml
index dcf1de0..95b6683 100644
--- a/docs/book.toml
+++ b/docs/book.toml
@@ -65,5 +65,6 @@ typescript.loading = "lazy"
 javascript.enable = true
 javascript.loading = "lazy"
 
+# lua is disabled by default and loading is lazy
 lua.enable = true
 lua.loading = "lazy"
diff --git a/docs/src/usage.md b/docs/src/usage.md
index 05773f1..7fc3c29 100644
--- a/docs/src/usage.md
+++ b/docs/src/usage.md
@@ -39,16 +39,16 @@ python.loading = "lazy"
 typescript.enable = true
 typescript.loading = "lazy"
 
-# javascript is disabled by default and loading is lazy
-javascript.enable = true
-javascript.loading = "lazy"
+# lua is disabled by default and loading is lazy
+lua.enable = true
+lua.loading = "lazy"
 ```
 
-- **[language].enable**: Enable the language for the repl, the default value is **false**.
-- **[language].loading**: The loading of the language, can be **eager** or **lazy**, the default value is **lazy**.
 - **src**: The url of the repl iframe, the default value is https://mr-addict.github.io/mdbook-repl/embed. You can also deploy your own repl server for better performance, see [For Developers](for-developers.md) section.
 - **editor.theme**: The theme of the code editor, the default value is **textmate**.
 - **editor.darkTheme**: The theme of the code editor in dark mode, if not specified, it will use the value of **editor.theme**, otherswise the default value is **monokai**.
+- **[language].enable**: Enable the language for the repl, the default value is **false**.
+- **[language].loading**: The loading of the language, can be **eager** or **lazy**, the default value is **lazy**.
 
 For example if you only care about python codeblock, you can only enable python and disable the others:
 

From eadc65ad616347044ed27da079c35f5fcbfa2583 Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Wed, 18 Mar 2026 22:20:15 +0800
Subject: [PATCH 07/10] feat: enhance language support and update documentation
 for REPL iframe configuration

---
 backend/src/repl.rs | 19 ++++++++++++++++++-
 docs/src/usage.md   |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/backend/src/repl.rs b/backend/src/repl.rs
index 2a86683..20fcda9 100644
--- a/backend/src/repl.rs
+++ b/backend/src/repl.rs
@@ -45,9 +45,26 @@ fn map_lang(raw_lang: &str) -> &str {
     }
 }
 
+fn get_langs_regex(extensions: &[&str]) -> String {
+    extensions
+        .iter()
+        .map(|lang| format!("\\b{}\\b", lang))
+        .collect::<Vec<_>>()
+        .join("|")
+}
+
 fn render_repls(content: &str, config: &Config) -> (bool, String) {
     // \r? is for windows line endings
-    let langs = r"\bpy\b|\bpython\b|\bts\b|\btypescript\b|\bjs\b|\bjavascript\b|\blua\b";
+    let extensions = [
+        "py",
+        "python",
+        "ts",
+        "typescript",
+        "js",
+        "javascript",
+        "lua",
+    ];
+    let langs = get_langs_regex(&extensions);
     let re = Regex::new(&format!(r"(?s)```({}),?(.*?)\r?\n(.*?)```", langs)).unwrap();
 
     // if there are no matches, return the content as is
diff --git a/docs/src/usage.md b/docs/src/usage.md
index 7fc3c29..3a65321 100644
--- a/docs/src/usage.md
+++ b/docs/src/usage.md
@@ -44,7 +44,7 @@ lua.enable = true
 lua.loading = "lazy"
 ```
 
-- **src**: The url of the repl iframe, the default value is https://mr-addict.github.io/mdbook-repl/embed. You can also deploy your own repl server for better performance, see [For Developers](for-developers.md) section.
+- **src**: The url of the repl iframe. You can also deploy your own repl server for better performance, see [For Developers](for-developers.md) section.
 - **editor.theme**: The theme of the code editor, the default value is **textmate**.
 - **editor.darkTheme**: The theme of the code editor in dark mode, if not specified, it will use the value of **editor.theme**, otherswise the default value is **monokai**.
 - **[language].enable**: Enable the language for the repl, the default value is **false**.

From 39fd77164fc7704451b7b063b3a692d8b21ac588 Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Wed, 18 Mar 2026 22:21:35 +0800
Subject: [PATCH 08/10] chore: bump version to 0.2.9 in Cargo.toml and
 package.json

---
 backend/Cargo.lock    | 2 +-
 backend/Cargo.toml    | 2 +-
 frontend/package.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index 55309db..be2ff05 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -930,7 +930,7 @@ dependencies = [
 
 [[package]]
 name = "mdbook-repl"
-version = "0.2.8"
+version = "0.2.9"
 dependencies = [
  "clap",
  "mdbook",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index fb79f5d..1c0a16b 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mdbook-repl"
-version = "0.2.8"
+version = "0.2.9"
 edition = "2021"
 license = "MIT"
 readme = "../README.md"
diff --git a/frontend/package.json b/frontend/package.json
index c4d6ef4..8c4066d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mdbook-repl",
   "private": true,
-  "version": "0.2.8",
+  "version": "0.2.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

From 1a733a1a1c3a40c32d2d9cb5094c6fc2bf319a3d Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Wed, 18 Mar 2026 22:32:26 +0800
Subject: [PATCH 09/10] fix: correct attribute names for editor theme and
 loading options in REPL configuration

---
 backend/assets/script.html | 2 +-
 backend/src/repl.rs        | 2 +-
 docs/src/usage.md          | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/backend/assets/script.html b/backend/assets/script.html
index d741888..ea68228 100644
--- a/backend/assets/script.html
+++ b/backend/assets/script.html
@@ -6,7 +6,7 @@
     const lang = replElement.getAttribute("data-lang");
     const code = getCode(replElement.nextElementSibling);
     const readonly = replElement.getAttribute("data-readonly") === "true";
-    const editorTheme = replElement.getAttribute("data-edit-theme") ?? "";
+    const editorTheme = replElement.getAttribute("data-editor-theme") ?? "";
     const editorDarkTheme = replElement.getAttribute("data-editor-dark-theme") ?? "";
     let theme = mapTheme(localStorage.getItem("mdbook-theme") || document.querySelector(".theme.theme-selected")?.id);
     const postmessage = (msg) => iframeElement.contentWindow.postMessage({ repl: msg }, "*");
diff --git a/backend/src/repl.rs b/backend/src/repl.rs
index 20fcda9..6c203c7 100644
--- a/backend/src/repl.rs
+++ b/backend/src/repl.rs
@@ -87,7 +87,7 @@ fn render_repls(content: &str, config: &Config) -> (bool, String) {
 
             // get the config options
             let enable = cfg::get_config_bool(config, &format!("{}.enable", lang), false);
-            let loading = cfg::get_config_string(config, &format!("{}.lazy", lang), "lazy");
+            let loading = cfg::get_config_string(config, &format!("{}.loading", lang), "lazy");
             let editor_theme = cfg::get_config_string(config, "editor.theme", "");
             let editor_dark_theme = cfg::get_config_string(config, "editor.darkTheme", "");
             let src = cfg::get_config_string(
diff --git a/docs/src/usage.md b/docs/src/usage.md
index 3a65321..ab1c313 100644
--- a/docs/src/usage.md
+++ b/docs/src/usage.md
@@ -39,6 +39,10 @@ python.loading = "lazy"
 typescript.enable = true
 typescript.loading = "lazy"
 
+# javascript is disabled by default and loading is lazy
+javascript.enable = true
+javascript.loading = "lazy"
+
 # lua is disabled by default and loading is lazy
 lua.enable = true
 lua.loading = "lazy"

From 30f6ae7a1a2c6290800038d0767c56750a83a18a Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Wed, 18 Mar 2026 22:33:01 +0800
Subject: [PATCH 10/10] fix: correct typo in editor.darkTheme documentation

---
 docs/src/usage.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/usage.md b/docs/src/usage.md
index ab1c313..fcceeac 100644
--- a/docs/src/usage.md
+++ b/docs/src/usage.md
@@ -50,7 +50,7 @@ lua.loading = "lazy"
 
 - **src**: The url of the repl iframe. You can also deploy your own repl server for better performance, see [For Developers](for-developers.md) section.
 - **editor.theme**: The theme of the code editor, the default value is **textmate**.
-- **editor.darkTheme**: The theme of the code editor in dark mode, if not specified, it will use the value of **editor.theme**, otherswise the default value is **monokai**.
+- **editor.darkTheme**: The theme of the code editor in dark mode, if not specified, it will use the value of **editor.theme**, otherwise the default value is **monokai**.
 - **[language].enable**: Enable the language for the repl, the default value is **false**.
 - **[language].loading**: The loading of the language, can be **eager** or **lazy**, the default value is **lazy**.