LaTeXコマンドを含む文章を入力して"Typeset"ボタンを押すと数式を表示します.
$...$ または \(...\) で囲まれた部分はインライン数式として, $$...$$ または \[...\] で囲まれた部分はディスプレイ数式として変換されます.
改行には<br>を使用してください.
数式の末尾に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> | |
| #input, #result { | |
| width:100%; | |
| min-height:5em; | |
| border:solid 1px grey; | |
| } | |
| #input { | |
| font-size:120%; | |
| } | |
| .toWolframAlpha { | |
| font-size: 80%; | |
| margin-left: 0.2em; | |
| } | |
| .toWolframAlpha.display { | |
| margin-left: .5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>動的MathJax + WolframAlpha</h1> | |
| <p> | |
| Input: | |
| <textarea id="input" rows="10">インライン数式の例: $\frac{1 + \sqrt{5}}{2}$, $\sin \theta$, $y = a^x$<br> | |
| ディスプレイ数式の例: | |
| $$ z = x^2 - y^2, $$ | |
| $$ \int_{-\infty}^{\infty} e^{-x^2} \, dx, $$ | |
| $$ \sum_{n = 1}^{\infty} \frac{1}{n^2} $$ | |
| </textarea> | |
| <input type="button" id="typeset" value="Typeset"> | |
| </p> | |
| <p> | |
| Result: | |
| <div id="result"></div> | |
| </p> | |
| <script> | |
| $(function() { | |
| $("#typeset").click(function() { | |
| $("#result").html($("#input").val()); | |
| MathJax.Hub.Queue(typeset); | |
| }); | |
| function typeset() { | |
| MathJax.Hub.Typeset($("#result")[0], 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> |