Pyscript与WordPress集成异常：触发Pyodide文件下载而非执行代码

问题现象 #

将PyScript代码嵌入WordPress文章预览，或通过VS Code Live Server运行时，页面未输出预期的Now you can!文本，反而触发Pyodide相关文件的下载，无法实现前端Python计算功能。

问题代码 #

原代码存在语法错误：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body> 
    <py-script> print('Now you can!') </py-script>| <!-- 此处多余竖线是核心错误 -->
</body>
</html>

核心原因 #

1. HTML结构解析错误：<py-script>标签末尾的多余竖线|破坏了HTML标签的完整性，导致浏览器无法正确识别PyScript组件，进而误将Pyodide的初始化资源识别为可下载文件。
2. WordPress编辑器过滤：默认编辑器可能自动转义或过滤自定义HTML标签（如<py-script>），导致PyScript无法正常加载。

解决方案 #

1. 修复代码语法错误 #

移除<py-script>标签末尾的多余竖线，修正后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body> 
    <py-script> print('Now you can!') </py-script>
</body>
</html>

2. WordPress环境适配 #

• 使用自定义HTML区块嵌入代码：在古腾堡编辑器中添加「自定义HTML」区块，直接粘贴修正后的代码，避免使用默认文本/段落区块（会自动转义HTML）。
• 关闭编辑器过滤：若使用经典编辑器，切换到「文本模式」粘贴代码，关闭「可视化编辑」；古腾堡编辑器需确保未启用标签过滤插件。
• 安全插件白名单：若网站安装了安全类插件（如Wordfence），将pyscript.net域名加入资源白名单，防止PyScript的CDN资源被拦截。

验证步骤 #

1. 本地运行：用VS Code Live Server打开修正后的代码，确认页面正常显示Now you can!，无下载弹窗。
2. WordPress预览：在WordPress中使用自定义HTML区块嵌入代码，预览文章确认Python代码执行并输出内容。

内容的提问来源于stack exchange，提问作者AMEER SAID