部署GitHub Pages（Jekyll博客）时PyScript语法错误问题

问题现象 #

本地运行正常的PyScript代码，部署到GitHub Pages的Jekyll博客后加载页面时触发语法错误，报错信息如下：

JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 421, in eval_code CodeRunner( File "/lib/python3.10/site-packages/_pyodide/_base.py", line 237, in __init__ self.ast = next(self._gen) File "/lib/python3.10/site-packages/_pyodide/_base.py", line 141, in _parse_and_compile_gen mod = compile(source, filename, mode, flags | ast.PyCF_ONLY_AST) File "", line 1 from js import document def main(): content = document.getElementById('test3').children[0]; content.innerHTML = 'output3' main() ^^^ SyntaxError: invalid syntax )

核心原因 #

Jekyll作为GitHub Pages默认的静态站点生成器，会自动处理Markdown文件中的内容。当<py-script>标签内的Python代码写在Markdown里时，Jekyll会移除代码中的换行符，将所有代码压缩成一行——而Python依赖换行划分语句块，压缩后的代码完全不符合语法规范，因此触发SyntaxError。

从报错信息里的代码片段也能印证这一点：原本分行的代码被挤成了一行，from js import document后直接跟着def main()，破坏了Python的语法结构。

本地运行正常是因为没有经过Jekyll的编译流程，代码的换行格式被完整保留，PyScript可以正确解析执行。

解决方法 #

方法一：用Jekyll原生标签保护代码格式 #

在<py-script>标签内的Python代码前后添加{% raw %}和{% endraw %}，让Jekyll跳过对这段代码的处理，保留原有的换行和缩进：

<!-- PyScript -->
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

<div id="test3">
  <p style="font-size: 1.5rem; color: orange;">Loading...</p>
</div>

<py-script>
{% raw %}
from js import document

def main():
    content = document.getElementById('test3').children[0];
    content.innerHTML = 'output3'

main()
{% endraw %}
</py-script>

方法二：将Python代码改写为合法的单行格式（不推荐） #

把代码改成Python允许的单行写法（用分号分隔语句），但这种方式会大幅降低代码可读性，仅作为临时应急方案：

<!-- PyScript -->
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

<div id="test3">
  <p style="font-size: 1.5rem; color: orange;">Loading...</p>
</div>

<py-script>
from js import document; def main(): content = document.getElementById('test3').children[0]; content.innerHTML = 'output3'; main()
</py-script>

内容的提问来源于stack exchange，提问作者sungu Han