Last active
February 16, 2024 00:41
-
-
Save wakita/6534dda8fe940b528d1d84ba43988539 to your computer and use it in GitHub Desktop.
MathJax にツールチップを追加する実験
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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