Skip to content

Instantly share code, notes, and snippets.

@habari2011dunia
Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save habari2011dunia/1e2ae90171e855fa5c76 to your computer and use it in GitHub Desktop.
Save habari2011dunia/1e2ae90171e855fa5c76 to your computer and use it in GitHub Desktop.
MathJaxを動的に使う

使い方

LaTeXコマンドを含む文章を入力して"Typeset"ボタンを押すと数式を表示します. $...$ または \(...\) で囲まれた部分はインライン数式として, $$...$$ または \[...\] で囲まれた部分はディスプレイ数式として変換されます. 改行には<br>を使用してください.

JavaScript

MathJaxを使用しています. "Typeset"ボタンが押されるとMathJax.Hub.Typesetが実行されます. これによって文字列中のコマンドが数式に変換されます.

参考

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MathJaxを動的に使うく</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: [['$','$'], ['\\(','\\)']]}
});
</script>
<style>
#input, #result {
width:100%;
min-height:5em;
border:solid 1px grey;
}
#input {
font-size:120%;
}
</style>
</head>
<body>
<p>
Input:
<textarea id="input" rows="10">インライン数式を書くには $\frac{1}{\sqrt{2}}$ や \(\sin \theta\) のようにしてください.
ディスプレイ数式は
$$ e^{\pi i} = -1 $$
\[ E = mc^2 \]
のように書くことができます.
改行を入れたい場合は<br>を使ってください.</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.Typeset($("#result")[0], function() { console.log("Done"); });
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment