Skip to content

Instantly share code, notes, and snippets.

@wakita
Last active February 16, 2024 00:41
Show Gist options
  • Save wakita/6534dda8fe940b528d1d84ba43988539 to your computer and use it in GitHub Desktop.
Save wakita/6534dda8fe940b528d1d84ba43988539 to your computer and use it in GitHub Desktop.
MathJax にツールチップを追加する実験
<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
const tooltips = {
'a2+b2=c2': 'aとbの二乗和はcの二乗に等しい。',
'd2+e2=f2': 'dとeの二乗和はfの二乗に等しい。',
};
function on_ready() {
$(document).tooltip(); // ツールチップ機能の開始
/**
* DOM 木のなかから <mjx-container> を探し、その内容をテキスト化したものが `tooltips` のキーに一致した場合、
* 該当する値をツールチップに設定する。
**/
$('mjx-container').each((i, f) => {
$f = $(f);
const text = $f.text();
console.log(`${text} => ${tooltips[text]}`);
if (tooltips[text]) {
$f.attr('title', tooltips[text]);
}
});
}
MathJax = {
tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] },
svg: { fontCache: 'global' },
startup: { ready: () => {
MathJax.startup.defaultReady();
MathJax.startup.promise.then(on_ready);
}
}
};
</script>
<body>
$a^2 + b^2 = c^2$, $d^2 + e^2 = f^2$.
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment