feat: Allow excluding assets when rendering Pyodide fence

pawamoy · Jun 13, 2024 · 5412353 · 5412353
1 parent 8967270
commit 5412353
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/docs/usage/pyodide.md b/docs/usage/pyodide.md
@@ -81,4 +81,24 @@ import griffe
 import dependenpy
 print("OK!")
 ```
-````
+````
+
+## Excluding assets
+
+When you add a Pyodide fence to a page,
+Markdown Exec will inject `<script>` and `<link>` tags
+to load Javascript and CSS assets.
+If you add multiple Pyodide fences to the same page,
+the same assets will be included many times.
+The browser is clever enough not to re-download them everytime
+(they are cached), but we can still avoid re-injecting assets
+to make the HTML page smaller and faster.
+
+````md
+```pyodide assets="no"
+print("hello")
+```
+````
+
+**Make sure that at least one Pyodide fence per page injects the assets.**
+
diff --git a/src/markdown_exec/formatters/pyodide.py b/src/markdown_exec/formatters/pyodide.py
@@ -13,13 +13,15 @@
 play_emoji = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5.14v14l11-7-11-7Z"></path></svg>'
 clear_emoji = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.14 3c-.51 0-1.02.2-1.41.59L2.59 14.73c-.78.77-.78 2.04 0 2.83L5.03 20h7.66l8.72-8.73c.79-.77.79-2.04 0-2.83l-4.85-4.85c-.39-.39-.91-.59-1.42-.59M17 18l-2 2h7v-2"></path></svg>'
 
-template = """
+assets = """
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.16.0/ace.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/pyodide/v0.23.0/full/pyodide.js"></script>
 <link title="light" rel="alternate stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/tomorrow.min.css" disabled="disabled">
 <link title="dark" rel="alternate stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/tomorrow-night-blue.min.css" disabled="disabled">
+"""
 
+template = """
 <div class="pyodide">
 <div class="pyodide-editor-bar">
 <span class="pyodide-bar-item">Editor (session: %(session)s)</span><span id="%(id_prefix)srun" title="Run: press Ctrl-Enter" class="pyodide-bar-item pyodide-clickable"><span class="twemoji">%(play_emoji)s</span> Run</span>
@@ -46,6 +48,7 @@ def _format_pyodide(code: str, md: Markdown, session: str, extra: dict, **option
     _counter += 1
     install = extra.pop("install", "")
     install = install.split(",") if install else []
+    exclude_assets = extra.pop("assets", "1").lower() in {"0", "false", "no", "off"}
     theme = extra.pop("theme", "tomorrow,tomorrow_night")
     if "," not in theme:
         theme = f"{theme},{theme}"
@@ -60,4 +63,7 @@ def _format_pyodide(code: str, md: Markdown, session: str, extra: dict, **option
         "play_emoji": play_emoji,
         "clear_emoji": clear_emoji,
     }
-    return template % data
+    rendered = template % data
+    if exclude_assets:
+        return rendered
+    return assets + rendered