PythonをWordPressに埋め込む

Python

2023.02.22 2023.02.21

Pyscriptの埋め込み
SyntaxErrorが出る場合
1. 対処法1. <code></code>で囲む
2. 対処法2. Base64変換

Pyscriptの埋め込み

Pyscriptを使用してWordPress上でPythonの実行環境を構築してみます。
方法は簡単で、以下のようにカスタムHTMLを貼り付けるだけです。

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

for i in range(10):
    print(i)
</py-repl>

結果は以下のようになります。

for i in range(10): print(i)

SyntaxErrorが出る場合

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css">
<script defer="" src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>
print("Hello, world")
</py-script>

のように<py-script>内部で”や’などを用いると以下のエラーが出る場合があります。

line 1 print(“Hello world!”) ^ SyntaxError: invalid character '“' (U+201C) )

根本的な原因は分かっていないですが、wordpressのカスタムHTMLからpythonコードへ変化されるまでにUniCodeへの文字コード変換が行われているようです。(U+201Cは”のUnicode。)
参考: https://snowtree-injune.com/2019/05/25/wordpress-misconversion/ のCase.4に相当すると思われます。

対処法1. <code></code>で囲む

カスタムHTMLで文字のエスケープを行ってほしくない場所を<code></code>で囲むことで自動変換を防ぐことができます。

https://snowtree-injune.com/2019/05/25/wordpress-misconversion/ を参考にさせていただきました。

<code>
<py-repl>
print('Hello')
</py-repl>
</code>



print('Hello')

対処法2. Base64変換

対処法として、Base64変換してしまうことが挙げられます。以下のようにお手元のpythonでエスケープしたいコードをBase64変換します。

import base64
# ここに変換したいコードを記述
code = '''
print("aaa")
'''

base64_bytes = base64.b64encode(code.encode())
print(base64_bytes)
# >>> b'CnByaW50KCJhYWEiKQo='

そして、そのBase64を py-script の src にべた書き

<py-script src="data:text/html;base64,CnByaW50KCJhYWEiKQo=">
</py-script>

すると、以下のように無事動きます。