# 投稿にライブなMatplotlib図を載せるには何が必要か？

**URL:** <https://meta.discourse.org/t/what-would-it-take-to-put-a-live-matplotlib-figure-in-a-post/327939>\
**Category:** Development\
**Created:** [2024 年 9 月 24 日午後 3:33 UTC](https://meta.discourse.org/t/what-would-it-take-to-put-a-live-matplotlib-figure-in-a-post/327939 "2024-09-24T15:33:59Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/582398_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)\
**Post date:** [2024 年 9 月 24 日午後 4:24 UTC](https://meta.discourse.org/t/what-would-it-take-to-put-a-live-matplotlib-figure-in-a-post/327939/2 "2024-09-24T16:24:40Z")

</div>

説明された方法は、カスタムプラグインを介して実現可能であり、markdown-it スタイルのプラグインと HTML 用のオブジェクトストレージを組み合わせることができます。ただし、ユーザーが入力したコードをサーバー上のどこでも実行させることのセキュリティについては注意が必要です。Discourse は、バックエンドで安全に解析できるように、投稿を HTML および JS 用にサニタイズするためにすでに多くの作業を行っています。

代わりに、ブラウザに Python インタープリターを埋め込み、クライアントでコードを実行させることで、HTML 作成全体をスキップする方がうまくいくかもしれません。[JupyterLite](https://jupyterlite.readthedocs.io/en/latest/index.html) を使用すると、UI を備えた JupyterLab をブラウザで実行できます。ドキュメントによると、[iframe 作成時にコードを自動実行](https://jupyterlite.readthedocs.io/en/latest/quickstart/embed-repl.html#auto-execute-code-on-startup) できるようです。カスタム HighlightJS プラグインを使用してコードを入力し、Python コードブロックにアクション可能なボタンを作成するか、自動実行させることができます。

たとえば、次のようになります。

1. ユーザーは Python コードブロックを含む投稿を表示します。
2. ユーザーがコードブロックにカーソルを合わせると、コードをブラウザで実行するためのボタンが表示されます。
3. ユーザーがボタンをクリックすると、コードブロックからコードをインポートして、コードブロックの下に JupyterLite の iframe が作成されます。

これは単なる HighlightJS プラグインであり、iframe を JupyterLite に作成するだけなので、サーバーコードを必要とせずにすべてをテーマコンポーネント内で作成できます。

> **[Embed a live REPL on a website — JupyterLite 0.7.0-beta.0 documentation](https://jupyterlite.readthedocs.io/en/latest/quickstart/embed-repl.html)**

注意点として、JupyterLite は JupyterLab ほど機能が完全ではないと説明されており、 ~~パッケージのインポートをどのように処理するかは不明なため、自分でホストする必要があるかもしれません。~~ JupyterLite は [Pyodide](https://pyodide.org/en/stable/) を使用しており、PyPI の任意のホイールをサポートしているため、問題ないはずです。

---

_[View the full topic](https://meta.discourse.org/t/what-would-it-take-to-put-a-live-matplotlib-figure-in-a-post/327939)._
