SphinxでビルドしたHTMLの中のコードブロックにコピーボタンを追加するsphinx-copybutton拡張

香織先輩 & ドラえもんさん、お誕生日おめでとうございます！ nikkieです。

気になっていたSphinx拡張を試しました。

ドキュメンテーションツールSphinxで、ビルドしたHTML中のコードブロックをボタン一発でコピー可能にする拡張です。

画像右上にご注目

使い方は、インストールして有効にするだけ。

$ pip install sphinx-copybutton

# conf.py
extensions = [
    "sphinx_copybutton",
]

How easy!!🍰

自分のドキュメント¹に設定した例です。

上記の画像もこちらからです。
ボタンワンクリックでコードをコピー、とっても便利に思います

今回試してみた次第です。

「Pythonでどうやってるんだろう」と興味を持ち、実装を見てみました🔍
結論としては、コピーボタンの実装はJavaScriptで実現していました

ビルドプロセスの中で_staticディレクトリにあるファイルがコピーされ、同時にHTMLにも書かれるので、コピーボタンが動作するという理解です

<!-- ビルドされたHTMLには追加されていました（一部だけ抜粋） -->
<script src="_static/copybutton.js?v=f281be69"></script>

SphinxでビルドしたHTMLの中のコードブロックにコピーボタンを設けるsphinx-copybuttonを試しました。
簡単に設定できる点が素晴らしいと思います！
JavaScriptを書いてもSphinx拡張を実現できるという気づきもありました。

nikkie-ftnextの日記