数学記号の WEb表示のテンプレート ある?
Webサイト上で数学記号や数式をきれいに表示するためのHTMLテンプレートを用意しました。
現在、Webで数式を表示する方法としては、MathJax(マスジャックス) または KaTeX(カテックス) というライブラリを使用するのが一般的です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MathJax 数式表示テンプレート</title>
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<p>2次方程式の一般形は $ax^2 + bx + c = 0$ と表されます。</p>
<p>解の公式は $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ です。</p>
<p>$$E = mc^2$$</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>KaTeX 数式表示テンプレート</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js"
onload="renderMathInElement(document.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false}
]
});"></script>
</head>
<body>
<p>オイラーの等式は $e^{i\pi} + 1 = 0$ です。</p>
<p>$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$</p>
</body>
</html>