火曜日, 12月 02, 2025

Let's start JavaScript 89 
HTMLでMathJaxによる数式表示


HTMLで数式や化学式の記述設定を整理してみました。
HTMLで LaTeX形式の数式 を表示する場合は、
一般的には MathJax(またはKaTeX)というJavaScriptライブラリを使います。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MathJaxによる数式表示</title>
<!-- MathJax CDN -->
<script
src=
    "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<style>
body {
font-family: "Noto Sans JP", sans-serif;
background: #f9f9f9;
color: #333;
padding: 30px;
}
</style>
</head>
<body>
<h2>MathJaxによる数式表示</h2>
<h3>分数1:\(\frac{a}{b}\)</h3>
<h3>分数2:\(\frac{a-x}{b+y}\)</h3>
<h3>分数3:\(\frac{a-x}{\sqrt{b^3+y}}\)</h3>
<h3>平方根1:\(\sqrt{x}\)</h3>
<h3>平方根2:\(5\sqrt{x}-\sqrt{y}\)</h3>
<h3>平方根3:\(\sqrt{3x^2-2}\)</h3>
<h3>化学式1 アンモニア:\(NH_3\)</h3>
<h3>化学式2 硫酸:\(H_2SO_4\)</h3>
<h3>化学式3 水産課カルシウム:\(C_a(OH)_2\)</h3>
<h3>ギリシャ文字:\(\alpha, \beta, \gamma\)</h3>
</body>
</html>

実行結果です。もう少し複雑な式も後日整理してみます。