<script>...</script>部分と<style>...</style>部分をHTMLソースに貼り付けて使用します.
$...$ または \(...\) で囲まれた部分はインライン数式として, $$...$$ または \[...\] で囲まれた部分はディスプレイ数式として変換されます.
変換された数式の末尾にWolframAlphaへのリンクが付いた♣マークが追加されます.
MathJaxを使用しています.
"Typeset"ボタンが押されるとMathJax.Hub.Typesetが実行されます.
これによって文字列中のコマンドが数式に変換されます.
LaTeXコマンドとして解釈された部分を
MathJax.Hub.getJaxByInputType
によって取得し, WolframAlphaへのリンクを生成します.
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>MathJax + WolframAlpha</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script> | |
| <script> | |
| MathJax.Hub.Config({ | |
| tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}, | |
| skipStartupTypeset: true | |
| }); | |
| </script> | |
| <style> | |
| .toWolframAlpha { | |
| font-size: 80%; | |
| margin-left: 0.2em; | |
| } | |
| .toWolframAlpha.display { | |
| margin-left: .5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>MathJax + WolframAlpha</h1> | |
| <p> | |
| インライン数式の例: $\frac{1 + \sqrt{5}}{2}$, $\sin \theta$, $y = a^x$ | |
| </p> | |
| <p> | |
| ディスプレイ数式の例: | |
| $$ z = x^2 - y^2, $$ | |
| $$ \int_{-\infty}^{\infty} e^{-x^2} \, dx, $$ | |
| $$ \sum_{n = 1}^{\infty} \frac{1}{n^2} $$ | |
| </p> | |
| <script> | |
| $(function() { | |
| MathJax.Hub.Queue(typeset); | |
| function typeset() { | |
| MathJax.Hub.Typeset(document.body, addLink); | |
| } | |
| function addLink() { | |
| var jax = MathJax.Hub.getJaxByInputType("math/tex"); | |
| jax.forEach(function(e) { | |
| var cls = 'toWolframAlpha' + (e.HTMLCSS.display ? ' display' : ''); | |
| var text = '♣'; | |
| var title = 'WolframAlphaへのリンク'; | |
| var target = 'wolframalpha'; | |
| var url = 'https://www.wolframalpha.com/input/?i=' + encodeURIComponent(e.originalText); | |
| var html = | |
| '<span class="'+cls+'">'+ | |
| '<a href="'+url +'" target="'+target+'" title="'+title+'">'+text+ | |
| '</a></span>'; | |
| $(html).insertAfter("#"+e.inputID+"-Frame"); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |