直接在 HTML 中運行 Python 程式

Yungger

5 min readMay 5, 2022

可以在 HTML 中運行 Python 程式嗎 ? 答案是, 可以 !!

需要架設 Django 或 Flask 作為後台程式嗎 ? 不用 !!

複雜難寫嗎 ? 不難 !! 只要跟著下面的方式練習就會 !!

STEP 1: 引入 `pyscript.css 與 pyscript.js`

直接在 HTML 的 <head> … </head> 內加入語法後, 執行時直接連至 pyscript.net 使用其 css 與 js。

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

STEP 2: 嵌入 python 程式碼

直接在 HTML 中, 將欲執行的 python 原始碼, 前後以<py-script> … </py-script> 包覆即可。

基本上, 會以上簡單的幾個步驟, 就可以在 HTML 的網頁中, 運行 Python 的程式了。接下來, 我再展示簡單的 2 個範例程式, 給各位參考 !!

範例一: Hello World

<html>   
<head>     
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />     
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>   </head>   
<body> 
      <py-script> print('Hello, World!') </py-script> 
</body> 
</html>

將上面的程式碼, 另存新檔, 例如我的檔名是 test_HelloWorld.html, 然後在瀏覽器上執行它。

範例二: Hello World + 目前日期時間

<html>   
<head>     
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />     
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>   </head>   
<body>     
    <py-script>print('Hello, World!')</py-script><br>
    This is the current date and time, as computed by Python: 
    <py-script>
    from datetime import datetime 
    now = datetime.now() 
    now.strftime("%m/%d/%Y, %H:%M:%S") 
    </py-script>   
</body> 
</html>

將上面的程式碼, 另存新檔, 例如我的檔名是 test_PyScript_Hello.html, 然後在瀏覽器上執行它。

範例三: 統計與繪圖

<html>   
<head>     
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />     
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>         
   - numpy         
   - matplotlib       
</py-env>   
</head>   
<body>     
<h1>Let's plot random numbers</h1>     
<div id="plot"></div> 
    <py-script output="plot"> 
    import matplotlib.pyplot as plt 
    import numpy as np  
    x = np.random.randn(1000) 
    y = np.random.randn(1000)  
    fig, ax = plt.subplots() ax.scatter(x, y) 
    fig 
</py-script>   
</body>
</html>