Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung Nächste Überarbeitung | Vorherige Überarbeitung |
user:hof:pyeditor [2024-05-21 20:40] – [Bottom.ch with direct component] hof | user:hof:pyeditor [2025-06-06 08:25] (aktuell) – [Bottom.ch with direct component] hof |
---|
# Inline Python Editors | # Inline Python Editors |
| ## Bottom.ch with direct component |
## Bottom.ch with iframe | This is the preferred version as of 2025. |
With iframe on bottom.ch/ksr/py/embed.html, which is based on pyodide and codemirror. | |
| |
<code html> | |
<html><iframe frameborder="0" width="100%" allow="clipboard-write" src="https://tkilla77.github.io/python_editor_wasm/embed.html?autorun&code=print%28%27Hello%2C+dokuwiki%21%27%29"></iframe></html></code> | |
| |
<html><iframe frameborder="0" width="100%" allow="clipboard-write" src="https://tkilla77.github.io/python_editor_wasm/embed.html?autorun&code=print%28%27Hello%2C+dokuwiki%21%27%29"></iframe></html> | |
## Bottom.ch with direct component | |
<code html> | <code html> |
<!-- Include the script once (or from a DokuWiki plugin, or from userscripts. --> | <!-- Include the script once (or from a DokuWiki plugin, or from userscripts. --> |
<html><script type="module" src="https://bottom.ch/ksr/ed/bottom-editor.js"></script></html> | <html><script type="module" src="https://bottom.ch/ksr/ed/bottom-editor.js"></script></html> |
| |
<!-- Include a custom component in HTML. --> | <!-- Include a custom component in HTML. Use height, min-height, max-height to control the size. --> |
<html><bottom-editor>print(42)</bottom-editor></html> | <!-- Leading empty lines will be dropped. --> |
| <html><bottom-editor style="min-height: 10lh;" autorun> |
| print(42) |
| </bottom-editor></html> |
</code> | </code> |
| |
<html><script type="module" src="https://bottom.ch/ksr/ed/bottom-editor.js"></script></html> | <html><script type="module" src="https://bottom.ch/ksr/ed/bottom-editor.js"></script></html> |
| |
<html><bottom-editor style="min-height: 10lh;">print(42) | <html><bottom-editor style="min-height: 10lh;" autorun>print(42)</bottom-editor></html> |
print(21)</bottom-editor></html> | |
| You can install files from an URL (with CORS headers if from a different domain!): |
| |
| <code html> |
| <html><bottom-editor zip='https://bottom.ch/ksr/py/files/2m.zip'> |
| with open('gemeinden.csv', 'r') as infile: |
| for line in infile: |
| tokens = line.split(',') |
| town = tokens[0] |
| if town == 'Romanshorn': |
| print(f'Romanshorn hat {tokens[2]} Einwohner') |
| </bottom-editor></html> |
| </code> |
| |
| <html><bottom-editor zip='https://bottom.ch/ksr/py/files/2m.zip'> |
| with open('gemeinden.csv', 'r') as infile: |
| for line in infile: |
| tokens = line.split(',') |
| town = tokens[0] |
| if town == 'Romanshorn': |
| print(f'Romanshorn hat {tokens[2]} Einwohner') |
| </bottom-editor></html> |
| |
| |
| ## Bottom.ch with iframe |
| With iframe on bottom.ch/ksr/py/embed.html, which is based on pyodide and codemirror. |
| |
| <code html> |
| <html><iframe frameborder="0" width="100%" allow="clipboard-write" src="https://tkilla77.github.io/python_editor_wasm/embed_old.html?autorun&code=print%28%27Hello%2C+dokuwiki%21%27%29"></iframe></html></code> |
| |
| <html><iframe frameborder="0" width="100%" allow="clipboard-write" src="https://tkilla77.github.io/python_editor_wasm/embed_old.html?autorun&code=print%28%27Hello%2C+dokuwiki%21%27%29"></iframe></html> |
| |
## JupyterLite | ## JupyterLite |
width="100%" | width="100%" |
height="500px"></iframe></code> | height="500px"></iframe></code> |
| |
| |
| <HTML><iframe |
| src="https://jupyterlite.github.io/demo/repl/index.html" |
| width="100%" |
| height="500px"></iframe></HTML> |