MathJaxの数式を確認するためのコード
数式の画像をコピーする必要が生じたので、数式のコードを入力したら数式に変換して表示してくれるページが欲しくなった。他のサイトに用意されてはいるが、複雑な機能はいらないので自分で用意することにした。コードはGeminiに教わった。ウィンドウの左側にTeXを入力すると右側に数式が表示される仕組み。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MathJax リアルタイムプレビュー</title>
<script>
window.MathJax = {
loader: { load: ['[tex]/empheq'] },
tex: {
packages: { '[+]': ['empheq'] },
tags: 'ams',
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
chtml: {
displayAlign: 'left'
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.7/tex-chtml.js"></script>
<style>
.container {
display: flex;
gap: 20px;
padding: 20px;
height: 90vh;
}
.box {
flex: 1;
display: flex;
flex-direction: column;
}
textarea {
width: 100%;
height: 100%;
padding: 15px;
font-family: monospace;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
}
#preview {
width: 100%;
height: 100%;
padding: 15px;
border: 1px solid #eee;
background-color: #fff;
border-radius: 4px;
overflow-y: auto;
}
h2 {
font-size: 1.2rem;
margin-bottom: 10px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Input (TeX)</h2>
<textarea id="input" placeholder="ここに数式を入力...例: $E=mc^2$"></textarea>
</div>
<div class="box">
<h2>Preview</h2>
<div id="preview"></div>
</div>
</div>
<script>
const inputArea = document.getElementById('input');
const previewArea = document.getElementById('preview');
// 入力イベントを監視
inputArea.addEventListener('input', () => {
const content = inputArea.value;
// プレビュー領域にテキストをセット
previewArea.textContent = content;
// MathJaxに再描画を依頼
if (window.MathJax && window.MathJax.typesetPromise) {
MathJax.typesetPromise([previewArea]).catch((err) => console.dir(err));
}
});
</script>
</body>
</html>
コメント
コメントを投稿