mdbook-repl 0.2.9

A rust based mdbook preprocessor that allows you to execute code in your mdbook without any server. Python, Typescript, Javascript etc.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!-- Custom REPL Script -->
<script>
  document.querySelectorAll(".repl").forEach((replElement) => {
    const iframeElement = replElement.querySelector("iframe");
    const id = replElement.getAttribute("data-id");
    const lang = replElement.getAttribute("data-lang");
    const code = getCode(replElement.nextElementSibling);
    const readonly = replElement.getAttribute("data-readonly") === "true";
    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 }, "*");
    function mapTheme(bookTheme) {
      return bookTheme === "light" || bookTheme === "rust" ? "light" : "dark";
    }
    function getCode(element) {
      // remove all the boring elements
      const code = element.cloneNode(true);
      code.querySelectorAll(".boring").forEach((boring) => boring.remove());
      return code.innerText.trim();
    }
    window.addEventListener("message", (event) => {
      const repl = event.data.repl;
      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, editorTheme, editorDarkTheme, lang, code, readonly, defaultCode: code } });
        return;
      }
      if (repl.id !== id) return;
      // update the iframe height
      replElement.style.height = repl.dimensions.height + "px";
      // show the iframe and hide the pre element
      iframeElement.classList.remove("hide");
      replElement.nextElementSibling.style.display = "none";
    });
    // listen to theme change
    document.querySelectorAll("button[role='menuitem'].theme").forEach((btn) => {
      btn.addEventListener("click", (event) => {
        theme = mapTheme(event.target.id);
        postmessage({ id, editor: { theme } });
      });
    });
  });
</script>