Deployed c071740 with MkDocs version: 1.5.2

Author: pawamoy

404.html

@@ -0,0 +1,49 @@
+html[data-theme="light"] {
+    @import "https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/tomorrow.css"
+}
+
+html[data-theme="dark"] {
+    @import "https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/tomorrow-night-blue.min.css"
+}
+
+
+.ace_gutter {
+    z-index: 1;
+}
+
+.pyodide-editor {
+    width: 100%;
+    min-height: 200px;
+    max-height: 400px;
+    font-size: .85em;
+}
+
+.pyodide-editor-bar {
+    color: var(--md-primary-bg-color);
+    background-color: var(--md-primary-fg-color);
+    width: 100%;
+    font: monospace;
+    font-size: 0.75em;
+    padding: 2px 0 2px;
+}
+
+.pyodide-bar-item {
+    padding: 0 18px 0;
+    display: inline-block;
+    width: 50%;
+}
+
+.pyodide pre {
+    margin: 0;
+}
+
+.pyodide-output {
+    width: 100%;
+    margin-bottom: -15px;
+    max-height: 400px
+}
+
+.pyodide-clickable {
+    cursor: pointer;
+    text-align: right;
+}

assets/_markdown_exec_pyodide.css

@@ -0,0 +1,109 @@
+var _sessions = {};
+
+function getSession(name, pyodide) {
+    if (!(name in _sessions)) {
+        _sessions[name] = pyodide.globals.get("dict")();
+    }
+    return _sessions[name];
+}
+
+function writeOutput(element, string) {
+    element.innerHTML += string + '\n';
+}
+
+function clearOutput(element) {
+    element.innerHTML = '';
+}
+
+async function evaluatePython(pyodide, editor, output, session) {
+    pyodide.setStdout({ batched: (string) => { writeOutput(output, string); } });
+    let result, code = editor.getValue();
+    clearOutput(output);
+    try {
+        result = await pyodide.runPythonAsync(code, { globals: getSession(session, pyodide) });
+    } catch (error) {
+        writeOutput(output, error);
+    }
+    if (result) writeOutput(output, result);
+    hljs.highlightElement(output);
+}
+
+async function initPyodide() {
+    try {
+        let pyodide = await loadPyodide();
+        await pyodide.loadPackage("micropip");
+        return pyodide;
+    } catch(error) {
+        return null;
+    }
+}
+
+function getTheme() {
+    return document.body.getAttribute('data-md-color-scheme');
+}
+
+function setTheme(editor, currentTheme, light, dark) {
+    // https://gist.github.com/RyanNutt/cb8d60997d97905f0b2aea6c3b5c8ee0
+    if (currentTheme === "default") {
+        editor.setTheme("ace/theme/" + light);
+        document.querySelector(`link[title="light"]`).removeAttribute("disabled");
+        document.querySelector(`link[title="dark"]`).setAttribute("disabled", "disabled");
+    } else if (currentTheme === "slate") {
+        editor.setTheme("ace/theme/" + dark);
+        document.querySelector(`link[title="dark"]`).removeAttribute("disabled");
+        document.querySelector(`link[title="light"]`).setAttribute("disabled", "disabled");
+    }
+}
+
+function updateTheme(editor, light, dark) {
+    // Create a new MutationObserver instance
+    const observer = new MutationObserver((mutations) => {
+        // Loop through the mutations that occurred
+        mutations.forEach((mutation) => {
+            // Check if the mutation was a change to the data-md-color-scheme attribute
+            if (mutation.attributeName === 'data-md-color-scheme') {
+                // Get the new value of the attribute
+                const newColorScheme = mutation.target.getAttribute('data-md-color-scheme');
+                // Update the editor theme
+                setTheme(editor, newColorScheme, light, dark);
+            }
+        });
+    });
+
+    // Configure the observer to watch for changes to the data-md-color-scheme attribute
+    observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['data-md-color-scheme'],
+    });
+}
+
+async function setupPyodide(idPrefix, install = null, themeLight = 'tomorrow', themeDark = 'tomorrow_night', session = null) {
+    const editor = ace.edit(idPrefix + "editor");
+    const run = document.getElementById(idPrefix + "run");
+    const clear = document.getElementById(idPrefix + "clear");
+    const output = document.getElementById(idPrefix + "output");
+
+    updateTheme(editor, themeLight, themeDark);
+
+    editor.session.setMode("ace/mode/python");
+    setTheme(editor, getTheme(), themeLight, themeDark);
+
+    writeOutput(output, "Initializing...");
+    let pyodide = await pyodidePromise;
+    if (install && install.length) {
+        micropip = pyodide.pyimport("micropip");
+        for (const package of install)
+            await micropip.install(package);
+    }
+    clearOutput(output);
+    run.onclick = () => evaluatePython(pyodide, editor, output, session);
+    clear.onclick = () => clearOutput(output);
+    output.parentElement.parentElement.addEventListener("keydown", (event) => {
+        if (event.ctrlKey && event.key.toLowerCase() === 'enter') {
+            event.preventDefault();
+            run.click();
+        }
+    });
+}
+
+var pyodidePromise = initPyodide();

assets/_markdown_exec_pyodide.js

@@ -31,23 +31,27 @@
 [data-md-color-scheme="default"] {
   --doc-symbol-attribute-fg-color: #953800;
   --doc-symbol-function-fg-color: #8250df;
+  --doc-symbol-method-fg-color: #8250df;
   --doc-symbol-class-fg-color: #0550ae;
   --doc-symbol-module-fg-color: #5cad0f;
 
   --doc-symbol-attribute-bg-color: #9538001a;
   --doc-symbol-function-bg-color: #8250df1a;
+  --doc-symbol-method-bg-color: #8250df1a;
   --doc-symbol-class-bg-color: #0550ae1a;
   --doc-symbol-module-bg-color: #5cad0f1a;
 }
 
 [data-md-color-scheme="slate"] {
   --doc-symbol-attribute-fg-color: #ffa657;
   --doc-symbol-function-fg-color: #d2a8ff;
+  --doc-symbol-method-fg-color: #d2a8ff;
   --doc-symbol-class-fg-color: #79c0ff;
   --doc-symbol-module-fg-color: #baff79;
 
   --doc-symbol-attribute-bg-color: #ffa6571a;
   --doc-symbol-function-bg-color: #d2a8ff1a;
+  --doc-symbol-method-bg-color: #d2a8ff1a;
   --doc-symbol-class-bg-color: #79c0ff1a;
   --doc-symbol-module-bg-color: #baff791a;
 }
@@ -77,6 +81,15 @@ code.doc-symbol-function::after {
   content: "func";
 }
 
+code.doc-symbol-method {
+  color: var(--doc-symbol-method-fg-color);
+  background-color: var(--doc-symbol-method-bg-color);
+}
+
+code.doc-symbol-method::after {
+  content: "meth";
+}
+
 code.doc-symbol-class {
   color: var(--doc-symbol-class-fg-color);
   background-color: var(--doc-symbol-class-bg-color);