Deployed 022b83b with MkDocs version: 1.6.1

Author: pawamoy

404.html

@@ -13,8 +13,6 @@ html[data-theme="dark"] {
 
 .pyodide-editor {
     width: 100%;
-    min-height: 200px;
-    max-height: 400px;
     font-size: .85em;
 }
 
@@ -47,4 +45,9 @@ html[data-theme="dark"] {
 .pyodide-clickable {
     cursor: pointer;
     text-align: right;
-}
+}
+
+/* For themes other than Material. */
+.pyodide .twemoji svg {
+    width: 1rem;
+}

assets/_markdown_exec_pyodide.css

@@ -16,15 +16,15 @@ function clearOutput(element) {
 }
 
 async function evaluatePython(pyodide, editor, output, session) {
-    pyodide.setStdout({ batched: (string) => { writeOutput(output, string); } });
+    pyodide.setStdout({ batched: (string) => { writeOutput(output, new Option(string).innerHTML); } });
     let result, code = editor.getValue();
     clearOutput(output);
     try {
         result = await pyodide.runPythonAsync(code, { globals: getSession(session, pyodide) });
     } catch (error) {
-        writeOutput(output, error);
+        writeOutput(output, new Option(error.toString()).innerHTML);
     }
-    if (result) writeOutput(output, result);
+    if (result) writeOutput(output, new Option(result).innerHTML);
     hljs.highlightElement(output);
 }
 
@@ -77,7 +77,15 @@ function updateTheme(editor, light, dark) {
     });
 }
 
-async function setupPyodide(idPrefix, install = null, themeLight = 'tomorrow', themeDark = 'tomorrow_night', session = null) {
+async function setupPyodide(
+    idPrefix,
+    install = null,
+    themeLight = 'tomorrow',
+    themeDark = 'tomorrow_night',
+    session = null,
+    minLines = 5,
+    maxLines = 30,
+) {
     const editor = ace.edit(idPrefix + "editor");
     const run = document.getElementById(idPrefix + "run");
     const clear = document.getElementById(idPrefix + "clear");
@@ -88,14 +96,28 @@ async function setupPyodide(idPrefix, install = null, themeLight = 'tomorrow', t
     editor.session.setMode("ace/mode/python");
     setTheme(editor, getTheme(), themeLight, themeDark);
 
+    editor.setOption("minLines", minLines);
+    editor.setOption("maxLines", maxLines);
+
+    // Force editor to resize after setting options
+    editor.resize();
+
     writeOutput(output, "Initializing...");
     let pyodide = await pyodidePromise;
     if (install && install.length) {
-        micropip = pyodide.pyimport("micropip");
-        for (const package of install)
-            await micropip.install(package);
+        try {
+            micropip = pyodide.pyimport("micropip");
+            for (const package of install)
+                await micropip.install(package);
+            clearOutput(output);
+        } catch (error) {
+            clearOutput(output);
+            writeOutput(output, `Could not install one or more packages: ${install.join(", ")}\n`);
+            writeOutput(output, new Option(error.toString()).innerHTML);
+        }
+    } else {
+        clearOutput(output);
     }
-    clearOutput(output);
     run.onclick = () => evaluatePython(pyodide, editor, output, session);
     clear.onclick = () => clearOutput(output);
     output.parentElement.parentElement.addEventListener("keydown", (event) => {

assets/_markdown_exec_pyodide.js

@@ -10,6 +10,11 @@
   display: inline;
 }
 
+/* No text transformation from Material for MkDocs for H5 headings. */
+.md-typeset h5 .doc-object-name {
+  text-transform: none;
+}
+
 /* Max width for docstring sections tables. */
 .doc .md-typeset__table,
 .doc .md-typeset__table table {
@@ -31,6 +36,11 @@
   display: inline;
 }
 
+/* Default font size for parameter headings. */
+.md-typeset .doc-heading-parameter {
+  font-size: inherit;
+}
+
 /* Prefer space on the right, not the left of parameter permalinks. */
 .doc-heading-parameter .headerlink {
   margin-left: 0 !important;
@@ -42,6 +52,28 @@
   font-weight: bold;
 }
 
+/* Backlinks crumb separator. */
+.doc-backlink-crumb {
+  display: inline-flex;
+  gap: .2rem;
+  white-space: nowrap;
+  align-items: center;
+  vertical-align: middle;
+}
+.doc-backlink-crumb:not(:first-child)::before {
+  background-color: var(--md-default-fg-color--lighter);
+  content: "";
+  display: inline;
+  height: 1rem;
+  --md-path-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
+  -webkit-mask-image: var(--md-path-icon);
+  mask-image: var(--md-path-icon);
+  width: 1rem;
+}
+.doc-backlink-crumb.last {
+  font-weight: bold;
+}
+
 /* Symbols in Navigation and ToC. */
 :root, :host,
 [data-md-color-scheme="default"] {
@@ -83,7 +115,8 @@ code.doc-symbol {
   font-weight: bold;
 }
 
-code.doc-symbol-parameter {
+code.doc-symbol-parameter,
+a code.doc-symbol-parameter {
   color: var(--doc-symbol-parameter-fg-color);
   background-color: var(--doc-symbol-parameter-bg-color);
 }
@@ -92,7 +125,8 @@ code.doc-symbol-parameter::after {
   content: "param";
 }
 
-code.doc-symbol-attribute {
+code.doc-symbol-attribute,
+a code.doc-symbol-attribute {
   color: var(--doc-symbol-attribute-fg-color);
   background-color: var(--doc-symbol-attribute-bg-color);
 }
@@ -101,7 +135,8 @@ code.doc-symbol-attribute::after {
   content: "attr";
 }
 
-code.doc-symbol-function {
+code.doc-symbol-function,
+a code.doc-symbol-function {
   color: var(--doc-symbol-function-fg-color);
   background-color: var(--doc-symbol-function-bg-color);
 }
@@ -110,7 +145,8 @@ code.doc-symbol-function::after {
   content: "func";
 }
 
-code.doc-symbol-method {
+code.doc-symbol-method,
+a code.doc-symbol-method {
   color: var(--doc-symbol-method-fg-color);
   background-color: var(--doc-symbol-method-bg-color);
 }
@@ -119,7 +155,8 @@ code.doc-symbol-method::after {
   content: "meth";
 }
 
-code.doc-symbol-class {
+code.doc-symbol-class,
+a code.doc-symbol-class {
   color: var(--doc-symbol-class-fg-color);
   background-color: var(--doc-symbol-class-bg-color);
 }
@@ -128,7 +165,8 @@ code.doc-symbol-class::after {
   content: "class";
 }
 
-code.doc-symbol-module {
+code.doc-symbol-module,
+a code.doc-symbol-module {
   color: var(--doc-symbol-module-fg-color);
   background-color: var(--doc-symbol-module-bg-color);
 }
@@ -141,3 +179,27 @@ code.doc-symbol-module::after {
   color: inherit;
   border-bottom: 1px dotted currentcolor;
 }
+
+/* Source code blocks (admonitions). */
+:root {
+  --md-admonition-icon--mkdocstrings-source: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.75.75 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06m-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0"/></svg>')
+}
+.md-typeset .admonition.mkdocstrings-source,
+.md-typeset details.mkdocstrings-source {
+  border: none;
+  padding: 0;
+}
+.md-typeset .admonition.mkdocstrings-source:focus-within,
+.md-typeset details.mkdocstrings-source:focus-within {
+  box-shadow: none;
+}
+.md-typeset .mkdocstrings-source > .admonition-title,
+.md-typeset .mkdocstrings-source > summary {
+  background-color: inherit;
+}
+.md-typeset .mkdocstrings-source > .admonition-title::before,
+.md-typeset .mkdocstrings-source > summary::before {
+  background-color: var(--md-default-fg-color);
+  -webkit-mask-image: var(--md-admonition-icon--mkdocstrings-source);
+          mask-image: var(--md-admonition-icon--mkdocstrings-source);
+}