taikedz/pyodide-example.html

## pyodide-example.html
<!DOCTYPE html>
<html><head>
<style>
python { display: none; }
</style>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script>
    <script>
// https://pyodide.org/en/stable/usage/quickstart.html
pyscripts = document.getElementsByTagName("python");
let pyodide = null

async function main() {
  pyodide = await loadPyodide();

  for(i=0; i < pyscripts.length; i++) {
    let python_script = pyscripts[i].innerHTML
    console.log(pyodide.runPython(python_script))
  }
};

main();

    </script>
<python>
import js
import time

def add_text(content):
  new_elem = js.document.createElement("p")
  new_elem.innerText = content
  js.document.getElementById("content").appendChild(new_elem)

def count_print(name):
  for i in range(20):
    add_text(f"{name} {i}")
    time.sleep(0.5)

</python>

<python>
# all executions happen with the same context
count_print("First")
</python>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html><head>
	<style>
	python { display: none; }
	</style>
	<script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script>
	<script>
	// https://pyodide.org/en/stable/usage/quickstart.html
	pyscripts = document.getElementsByTagName("python");
	let pyodide = null

	async function main() {
	pyodide = await loadPyodide();

	for(i=0; i < pyscripts.length; i++) {
	let python_script = pyscripts[i].innerHTML
	console.log(pyodide.runPython(python_script))
	}
	};

	main();

	</script>
	<python>
	import js
	import time

	def add_text(content):
	new_elem = js.document.createElement("p")
	new_elem.innerText = content
	js.document.getElementById("content").appendChild(new_elem)

	def count_print(name):
	for i in range(20):
	add_text(f"{name} {i}")
	time.sleep(0.5)

	</python>

	<python>
	# all executions happen with the same context
	count_print("First")
	</python>
	</head>
	<body>
	<div id="content"></div>
	</body>
	</html>