今起用新的 MathJax 3 支持数学公式

kuing

我突然有个想法，如果给 mathjax 公式的元素 <mjx-container> 加个 title 参数，内容为公式代码，这样鼠标移到公式上就能看到代码，有利于新手学习代码输入😀@hbghlyj能实现嘛？

hbghlyj

kuing 发表于 2024-11-30 09:14
这样鼠标移到公式上就能看到代码 ...

Tooltip - Customizable, themeable tooltips, replacing native tooltips. 比 title 更好看

hbghlyj

光标移动至此 can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

But as it's not a native tooltip, it can be styled. Any themes built with 光标移动至此 will also style tooltips accordingly.

Tooltips are also useful for form elements, to show some additional information in the context of each field.

光标移动至右边

Hover the field to see the tooltip.

kuing

hbghlyj 发表于 2024-12-4 18:26
Tooltip - Customizable, themeable tooltips, replacing native tooltips. 比 title 更好看

好不好看无所谓，重点是怎么将代码弄上 title。

另外，一引入 jquery 本页的某些功能就失效，我点回复又没反应了。

hbghlyj

kuing 发表于 2024-12-4 12:37
另外，一引入 jquery 本页的某些功能就失效，我点回复又没反应了。

用noConflict()，现在有反应了！😀

abababa

kuing 发表于 2024-11-30 17:14
我突然有个想法，如果给 mathjax 公式的元素 <mjx-container> 加个 title 参数，内容为公式代码，这样鼠标 ...

比如在这页（如果回复没换页的话），可不可以这样：

2. var vv = jQuery('mjx-container[ctxtmenu_counter="11"]');
3. var tex = findTeX(vv[0]);
4. jQuery(vv[0]).attr('title', tex);
6. function findTeX(container) {
7.   for (const math of MathJax.startup.document.math) {
8.     if (container === math.typesetRoot) return math.math;
9.   }
10. }

Copy the Code

其中findTeX是通用的，然后ctxtmenu_counter="11"就是108楼里的那个latex代码，前三行就是给它加了一个title，鼠标移动上去就显示了。

hbghlyj

abababa 发表于 2024-12-7 11:43
其中findTeX是通用的，然后ctxtmenu_counter="11"就是108楼里的那个latex代码，前三行就是给它加了一个title，鼠标移动上去就显示了。

成功！确实显示了\|x\|≤R⟹\|Tx\|≤M_R喔

爪机专用

abababa 发表于 2024-12-7 19:43
比如在这页（如果回复没换页的话），可不可以这样：

前三行能不能改写成原生 JS，别的页面没有 jquery （本页有是 116# 引入了

最好顺便改写成批量的☺️

$\sqrt 2$
$\sqrt[3]2$

那个 findTeX 函数的原理也看不懂……

======
O，搜索发现代码出自这：groups.google.com/g/mathjax-users/c/x5Z7JBElOas/m/Z4DYXY_nEQAJ

abababa

爪机专用 发表于 2024-12-7 20:35
前三行能不能改写成原生 JS，别的页面没有 jquery （本页有是 116# 引入了

最好顺便改写成批量的☺️

原生的javascript就像下面这样吧：

1. function findTeX(container) {
2.   for (const math of MathJax.startup.document.math) {
3.     if (container === math.typesetRoot) return math.math;
4.   }
5. }
6. var mjxes = document.getElementsByTagName('mjx-container');
8. for(let mjx of mjxes){
9.     let tex = findTeX(mjx);
10.     mjx.setAttribute('title', tex);
11. }

Copy the Code

然后就都能加上title了。
那个findTeX函数是搜索帖子找到的，就是楼上的那个链接。

爪机专用

abababa 发表于 2024-12-8 10:15
原生的javascript就像下面这样吧：

然后就都能加上title了。

现在手动运行代码没问题，下一步就是要将它加入到mathjax里吧，让它在mathjax渲染完所有公式后运行？
这方面 @hbghlyj 应该在行，快过来看看

abababa

爪机专用 发表于 2024-12-8 13:59
现在手动运行代码没问题，下一步就是要将它加入到mathjax里吧，让它在mathjax渲染完所有公式后运行？
这 ...

应该是用这个MathJax.Hub.Queue吧，放在这里的代码就是在渲染结束后执行的。下面这么写，能起作用吗？

1. MathJax.Hub.Queue(function() {
2.         var mjxes = document.getElementsByTagName('mjx-container');
3.         for(let mjx of mjxes){
4.                 let tex = findTeX(mjx);
5.                 mjx.setAttribute('title', tex);
6.         }
7. });

Copy the Code

爪机专用

abababa 发表于 2024-12-8 16:28
应该是用这个MathJax.Hub.Queue吧，放在这里的代码就是在渲染结束后执行的。下面这么写，能起作用吗？
...

这个好像是 mathjax V2 的写法？

docs.mathjax.org/en/v3.2-latest/upgrading/v2. … s-in-the-mathjax-api 里面说

• The queues, signals, and callbacks that are central to version 2 have been replaced by ES6 promises in version 3. In particular, you can use MathJax.startup.promise as a replacement for MathJax.Hub.Queue(). See the Handling Asynchronous Typesetting section for how this is done. See the Version 2 Compatibility Example below for code that may make it possible for you to use your version 2 code in version 3.

abababa

爪机专用 发表于 2024-12-8 16:58
这个好像是 mathjax V2 的写法？

https://docs.mathjax.org/en/v3.2-latest/upgrading/v2.html#changes-i ...

哦，那就按照链接里的说明修改就行了吧，比如下面这样的：

1. function findTeX(container) {
2.   for (const math of MathJax.startup.document.math) {
3.     if (container === math.typesetRoot) return math.math;
4.   }
5. }
6. MathJax.typesetPromise().then(() => {
7.   var mjxes = document.getElementsByTagName('mjx-container');
8.         for(let mjx of mjxes){
9.                 let tex = findTeX(mjx);
10.                 mjx.setAttribute('title', tex);
11.         }
12.   MathJax.typesetPromise();
13. });

Copy the Code

kuing

abababa 发表于 2024-12-9 10:50
哦，那就按照链接里的说明修改就行了吧，比如下面这样的：

貌似不行……写个简单本地网页测试：

1. <html>
2. <head>
3. <script>
4. window.MathJax = {
5.   tex: {
6.     inlineMath: [ ['$','$'], ['`','`'], ["\\(","\\)"] ]
7.   }
8. };
9. </script>
10. <script src="https://kuing.cjhb.site/mathjax3/es5/tex-svg.js"></script>
11. <script>
12. function findTeX(container) {
13.   for (const math of MathJax.startup.document.math) {
14.     if (container === math.typesetRoot) return math.math;
15.   }
16. }
17. MathJax.typesetPromise().then(() => {
18.   var mjxes = document.getElementsByTagName('mjx-container');
19.         for(let mjx of mjxes){
20.                 let tex = findTeX(mjx);
21.                 mjx.setAttribute('title', tex);
22.         }
23.   MathJax.typesetPromise();
24. });
25. </script>
26. </head>
28. <body>
29. <p>
30.     $\sqrt{a}$, $\sqrt[3]2$
31. </p>
32. </body>
33. </html>

Copy the Code

公式能显示，title 没弄上，控制台显示有错误，看不懂。

abababa

kuing 发表于 2024-12-9 12:17
貌似不行……写个简单本地网页测试：

公式能显示，title 没弄上，控制台显示有错误，看不懂。 ...

把这些自己写的script什么的都放在最后，就是那个</body>的前面，这样就行了吧。

kuing

abababa 发表于 2024-12-9 12:24
把这些自己写的script什么的都放在最后，就是那个</body>的前面，这样就行了吧。 ...

原来如此😊可以了
我再看看论坛怎么放好，还得看看与草稿本之类有没有冲突

kuing

kuing 发表于 2024-12-9 13:52
原来如此😊可以了
我再看看论坛怎么放好，还得看看与草稿本之类有没有冲突 ...

将那段代码放入了 zdy3pc.js 里，也就是只对 PC 版的帖子内容页有效，加载该 js 的位置在本页所有楼层之后。

奇怪的是，现在是有时行，有时不行。
（不行时看控制台会有
Uncaught TypeError: MathJax.typesetPromise is not a function
    at zdy3pc.js?orG:266:9
的错误信息）

kuing

kuing 发表于 2024-12-9 15:26
...
奇怪的是，现在是有时行，有时不行。
...

刚才看这帖时出现公式不正常显示：

（更奇怪是留意上图中最后有两个公式正常显示（鼠标指着那里））
怀疑也与加了这段代码有关。

==========
想起了 @hbghlyj 的 标记搜索词 一帖，也曾讨论过执行顺序的问题。
或许这里也需要一个 startup: { typeset: false } ？就算是，恐怕也得加个条件判断，麻烦哩……

hbghlyj

abababa 发表于 2024-12-9 04:24
把这些自己写的script什么的都放在最后，就是那个</body>的前面，这样就行了吧。 ...

这样会运行两次MathJax：初始化时运行一次，放在最后MathJax.typesetPromise()又运行一次。

docs.mathjax.org/en/latest/web/configuration. … ns-after-typesetting 建议在 MathJax的配置中 覆写 ready 或 pageReady

hbghlyj

abababa 发表于 2024-12-9 02:50
MathJax.typesetPromise().then(() => {
  var mjxes = document.getElementsByTagName('mjx-container');
        for(let mjx of mjxes){
                let tex = findTeX(mjx);
                mjx.setAttribute('title', tex);
        }
  MathJax.typesetPromise();
});

第12行是多余的吧。

第6行已 MathJax.typesetPromise() 然后加了 title，为什么要在第12行再次MathJax.typesetPromise()？