Web上の数式をコピーする方法(KaTeX/MathJax)

Webサイトで数式を表示する方法として最近、MathJaxKaTeXといった数式表示JavaScriptライブラリがよく利用されるようになりました。

\begin{align*} x = \frac{-b\pm\sqrt{b^2-4ac}}{2a} \end{align*}

MathJaxにより表示されている数式は右クリックメニューから [Show Math As] → [TeX Commands] でLaTeXコマンドを表示できるので、そこからコピー可能です。
(上記数式もMathJaxで表示しています)

MathJax数式のLaTeXコマンドをコピーする方法
※WebサイトのMathJaxバージョンが新しい場合、[Copy to Clipboard] → [TeX Commands] から直接コピーできます。

 

しかしWebサイトでの数式表示にKaTeXが使用されている場合、数式用の右クリックメニューは表示されないので数式のコピーができません。
(KaTeXの場合、サイト管理者が別途設定を行わないとコピーができない)

KaTeX数式のLaTeXコマンドをコピーする方法

これでは大変不便なので、選択した数式のLaTeXコマンドをワンクリックでクリップボードにコピーできるブックマークレットを作成しました。

時短になりますのでぜひご利用ください。(十数秒で導入できます)

選択した数式を1クリックでコピー

選択範囲にあるKaTeX数式(1個でも複数個でもOK)のTeXコードを1クリックでコピーできるツールです。

ソフト(アプリ)のインストールは不要で、最近のブラウザなら基本的にどのブラウザにも対応していると思います。
(ブラウザで動くブックマークレットなのでOSは問いません)

ブックマークレット
ブックマークと同じ見た目で、クリックすると簡易的なプログラムを実行できる。
中身はJavaScript。Webページの操作や移動、自動入力などに使える。

導入方法 (最短10秒)

以下の「数式コピー」ボタンをブラウザのブックマークバーにドラッグ&ドロップするだけで完了。

使うときは数式のある範囲を選択して追加されたブックマークレットをクリックするだけ。

See the Pen
選択したKaTeX数式を1クリックでコピー
by Pajoca (@Pajoca)
on CodePen.

CC0
Pajoca (パジョカ) はこのソースコードの全ての著作権および関連する権利をCC0により放棄しています。

※ブックマークバーの表示方法
お使いのブラウザでブックマークバーが表示されていない場合は、以下のショートカットキーを押すことで表示・非表示の切り替えができます。
Ctrl+Shift+B (Chrome/Firefox/Edge)
(ブックマークバーの場所はアドレスバーのすぐ下です)

※ボタン名(数式コピー)は導入後、自由に変更しても問題ありません。

 

使い方

Webサイト上のコピーしたい数式を、数式前後の文章部分も含めて選択します
(仕様上、数式を途中から選択すると数式が認識されないため)

KaTeX数式をコピーするブックマークレットの使い方

そして先ほど追加したブックマークレット「数式をコピー」をクリックすれば、選択範囲にある数式のLaTeXコマンドをコピーできます。

試しに上記の二次方程式の解の公式をコピーして貼り付けた結果がこちら。

x = {-b \pm \sqrt{b^2-4ac} \over 2a}

関係ない文字列が選択されていてもそれらは無視され、数式のLaTeXコマンドのみがコピーされます
(ですので、必ず数式の前にある文字列も含めて範囲選択してください)

複数の数式が含まれる文章をコピーした場合、数式のLaTeXコマンドが(数式ごと)改行された状態でコピーされます

もちろん途中に含まれる数式ではない文章は無視されるので、コピーしたい数式が複数ある場合はそれらをまとめて範囲選択して「数式コピー」を1クリックするだけでOKです。

クリックしてコピーが行われると文字選択が解除されます。

 

さっそくKaTeXコピーを試したい

例えば高校数学の美しい物語というサイトでKaTeXによる数式表示が行われています。ここで動作確認してみてください。

 

便利な使い方

ページに含まれる全ての数式をコピー

Ctrl+Aでページ内文章を全選択 →「数式コピー」をクリック

あるページに表示されている全ての数式のLaTeXコマンドを一気にコピーしたい場合は、ページ内文章をCtrl+Aのショートカットキーで全選択してからブックマークレットを実行してください。

そのページ内のすべての数式のコマンドが、1行に1数式の形でまとめてコピーされます。

 

仕様 & 対応数学サイト & 更新履歴

仕様 (注意点)

[New!] KaTeXとMathJax(Version 2)の数式がコピー可能

上述したKaTeX数式の他に、MathJax(Version 2系)の数式もコピーできます

MathJaxなら右クリックメニューからコピーすることもできますが、いちいちメニュー選択するのは時間がかかりますしブックマークレットなら選択範囲の複数の数式を同時にコピーすることもできるのでより便利になります。

MathJax(Version 3)の数式のコピーには非対応

MathJax(Version 3系)や、他の数式描画ライブラリにより表示された数式のコピーには現在対応していません。

Version 3系への対応は仕様上厳しいですが、ご要望があれば対応数式を増やしたいと思いますのでコメント欄などでリクエストください!

対応ブラウザ未検証

(古すぎない限り)どのブラウザでも動くと勝手に思っていますが実際にはブラウザによって機能しないかもしれません。

とりあえず最新版(2022/1/4)のChrome, Edge, Firefox では動作確認済みです。

 

数式コピー対応サイト (動作可否)

動作確認したサイトの一覧です。(数式を掲載したサイトは無数にあるので、よく利用されているサイトについて掲載)

Wikipedia のように数式が画像で表示されていても、(数式の情報が埋め込まれていれば) このツールで数式コピーが可能です

サイト 対応状況
Wikipedia
ProofWiki
Stack Exchange
(例: Math Stack Exchange / MathOverflow)
note
Qiita ×
Zenn

はてなブログ

AoPS

×

Mathlog

×

ChatGPT

 

更新履歴

各バージョンのコードはバージョン番号のリンク先で閲覧・使用できます。

バージョン 更新日時 更新内容
1.1.0 2022/01/07 MathJax(Version 2)で描画された数式のコピーにも対応
ソースコードのユーザーによるカスタマイズ性を向上。
1.0.0 2022/01/04 初版公開。

 

Web数式に関連した便利な情報

コピーした数式をWebですぐ編集

選択した数式を1クリックでオンライン数式エディタにコピーして編集できるブックマークレットも作りました!

HostMathというリアルタイム表示が可能なオンライン数式エディタが特に使いやすいので、以下のツールとともに活用してみてください。

選択数式を数式エディタへ

[usemath] Webサイトに掲載されている数式をコピーしてすぐにサクッと編集できれば便利! と思ったのでツール(ブックマークレット)を作りました。 (↓最近よく見かけるこんな感じのWeb数式) $$x = \frac[…]

なおHostMathの使い方はこちら↓

オンライン数式エディタ

インストール不要で数式をWebサイト上で作成・編集できる数式エディタ HostMath について、基本的な使い方や便利機能を説明します。 オンライン数式エディタ HostMath の特徴 HostMathはこちら。 [blogca[…]

オンラインLaTeX数式エディタ「HostMath」

 

MathJax活用法

KaTeXで数式を表示するWebサイトが増えている一方、MathJaxで数式表示しているサイトも(本サイト含め)まだまだたくさんありますので便利化のための各Tipsをご活用ください。

特に「Wikipediaで数式コピーを可能にする方法」や「数式表示を高速化する方法」は結構便利だと思います。

MathJaxを便利に

[usemath] 2022/1/7 追記: ★Web上の数式のLaTeXコードをコピーしたい場合はこちらの記事をご覧下さい↓ [sitecard subtitle=数式のコピー url=https://pajoca.com/copy[…]

MathJaxの右クリックメニューからLaTeXコードをコピーする方法

 

開発者向け情報

ライセンス (ご自由にお使い頂けます)

本ブックマークレットのソースコードはCC0 1.0(パブリックドメイン)で公開しているため、商用・非商用問わず誰でも自由に複製・改変・再配布できます。

またご利用にあたって申請も連絡もクレジット表記も不要です。

自分好みに改造するなどしてご自由にお使いください。

コメント欄でこのブックマークレットを改造したものなど投稿を受け付けております。

もしよろしければカスタマイズしたブックマークレットをコメント欄でCC0で公開して頂けると嬉しいです!

ソースコードの閲覧方法

こちらからコードを閲覧できます↓

リンク:選択範囲の数式を1クリックでコピー

HTML/CSS/JavaScriptいずれのコードもCC0(パブリックドメイン)なので自由にお使いいただけます。

※ソースコートの中身については本記事でも下の方で記載・説明しています。

※CodePen側とのライセンス相違について

本ブックマークレットはCodePenというオンラインHTML/CSS/JavaScript共有サービス上で公開しています。

CodePen上で公開したHTML/CSS/JavaScriptは全てMITライセンスとして扱われるサイト仕様になっているのですが、このソースコードは私が自作したものなのでCC0(パブリックドメイン)と私は勝手に宣言しています

MITライセンスで必要な著作権表示やライセンス文書の掲載が無くても私がそれを理由に訴えるようなことは一切ないのでご安心ください。

 

ソースコードの説明

長くなるので別のページに移動しました!

関連記事

本記事は↓のページで配布している「選択範囲にある数式のLaTeXコマンドを1クリックでコピーするブックマークレット」のソースコード説明や、カスタマイズのための情報提供を行っているページです。 [sitecard subtitle=数式[…]

文法事項や仕様の説明に加え、カスタマイズのために便利な情報も掲載しています。

このソースコードを元に色々なブックマークレットが作れると思いますのでぜひご利用ください!

 

KaTeXをお使いのサイト運営者へ

KaTeX数式コピー機能(公式)の実装方法

実はKaTeXでLaTeXコマンドをコピーするためのエクステンションが公式によって作成・配布されています。

そのためサイト運営者がそのエクステンションを実装すればユーザーは数式をクリックしてコピーするだけでLaTeXコマンドを簡単にコピーできます。

(サイト側で実装するので、ユーザーは何も準備しなくて良い)

以下のページで実装方法と仕様について記載されているので、ページにKaTeXをお使いの方は導入すればユーザーの利便性を向上できます。

リンク:Copy-tex extension

※実装といっても単にKaTeX数式を使っているページで追加のJavaScriptとCSSを読み込むだけで済むみたいなので簡単そうです。

実装後は、数式をクリックするだけで自動で数式が全選択され、その状態でコピーすると数式のLaTeXソースがコピーできます。

個人メモ(WordPressでの実装について)

追加CSSの方は内容としてはこれだけ→ copy-tex.css

いちいち個別ページごとにCSS読み込むのは面倒だから、WordPressなら [外観] → [カスタマイズ] → [追加CSS]の所に追加すれば良さそう。

その他のエクステンション・ライブラリ

他にも便利なエクステンションやライブラリが公式やサードパーティから配布されているみたいなので、必要に応じてご参照ください。

リンク:KaTeX Extensions & Libraries

記事化前の最新情報はこちらで先にツイートしています。サイト更新告知もこちら。