如何在HTML中运行多行Python代码？PyScript输出换行问题求助

首次使用PyScript在HTML中运行多行Python代码，发现网页上所有print的输出都挤在一行，以下是代码和实际输出，求解决方法及解释。

我的代码 #

<!DOCTYPE html>
<html>

    <py-script>
        print()
        print("Select the corresponding number or word for the operation to perform:")
        print("Type 'quit' To Quit")
        print("1. ADD")
            
        operation = input().lower()
                
        # --- ADD --- #
        if operation == "1" or operation == "add":
            addend1 = float(input("Enter The First Number: "))
            addend2 = float(input("Enter The Second Number: "))
            print("The Result Is ", str(addend1 + addend2))                     
     </py-script>

</html>

实际输出 #

网页上所有输出为单行显示，复制后内容如下：

print() print("Select The Corresponding Number Or Word For The Operation To Perform:") print("Type 'quit' To Quit") print("1. ADD") print("2. SUBTRACT") print("3. MULTIPLY") print("4. DIVIDE") operation = input().lower() # --- ADD --- # if operation == "1" or operation == "add": addend1 = float(input("Enter The First Number: ")) addend2 = float(input("Enter The Second Number: ")) print("The Result Is ", str(addend1 + addend2)) # --- SUBTRACT --- # elif operation == "2" or operation == "subtract": number1 = int(input("Enter the first number")) number2 = int(input("Enter the second number")) print("The Difference Is ", str(number1 - number2)) # --- MULTIPLY --- # elif operation == "3" or operation == "multiply": multiplicand = float(input("Enter The First Number: ")) multiplier = float(input("Enter The Second Number: ")) print("The Product Is ", str(multiplicand * multiplier)) # --- DIVIDE --- # elif operation == "4" or operation == "divide": dividend = float(input("Enter The First Number: ")) divisor = float(input("Enter The Second Number: ")) print("The Result Is ", str(dividend / divisor))

原因及解决方案 #

原因 #

PyScript默认将print的输出作为行内文本插入到DOM中，不会自动添加换行的HTML结构，因此所有输出内容会连续显示在一行。

解决方案1：重定向print输出为块级元素 #

通过重写sys.stdout.write，让每次print的内容都被包装在<p>标签（块级元素，自动换行）中：

<!DOCTYPE html>
<html>
    <py-script>
        import sys
        from pyscript import display

        def custom_print(*args, **kwargs):
            text = " ".join(str(arg) for arg in args)
            display(text, append=True, tag="p")

        sys.stdout.write = custom_print

        print("Select the corresponding number or word for the operation to perform:")
        print("Type 'quit' To Quit")
        print("1. ADD")
            
        operation = input().lower()
                
        # --- ADD --- #
        if operation == "1" or operation == "add":
            addend1 = float(input("Enter The First Number: "))
            addend2 = float(input("Enter The Second Number: "))
            print("The Result Is ", str(addend1 + addend2))                     
    </py-script>
</html>

解决方案2：使用PyScript终端组件（推荐） #

PyScript提供了<py-terminal>组件，专门模拟传统终端的交互和输出行为，自动处理换行：

<!DOCTYPE html>
<html>
    <py-terminal id="calc-terminal"></py-terminal>
    <py-script>
        from pyscript import Terminal

        terminal = Terminal("calc-terminal")

        terminal.print()
        terminal.print("Select the corresponding number or word for the operation to perform:")
        terminal.print("Type 'quit' To Quit")
        terminal.print("1. ADD")
            
        operation = terminal.input().lower()
                
        # --- ADD --- #
        if operation == "1" or operation == "add":
            addend1 = float(terminal.input("Enter The First Number: "))
            addend2 = float(terminal.input("Enter The Second Number: "))
            terminal.print("The Result Is ", str(addend1 + addend2))                     
    </py-script>
</html>

解决方案3：手动添加HTML换行标签 #

在每个print的内容末尾添加<br>标签，强制浏览器换行：

print("<br>")
print("Select the corresponding number or word for the operation to perform:<br>")
print("Type 'quit' To Quit<br>")
print("1. ADD<br>")

注意：此方法如果输出内容包含HTML特殊字符（如<、>）会出现渲染问题，仅适合简单文本场景。

内容的提问来源于stack exchange，提问作者Tyler The Creator