如何在使用 driver.js 创建的弹出窗口上使用 MathJax？

Question

我使用 driver.js to generate popovers to present a page. Though MathJax is working for basic elements, I can't figure out how to use it on the popovers. I followed 并尝试在生成弹出窗口时重新运行 MathJax，但我无法使其工作。

这里有一个描述问题的小例子：

<!DOCTYPE html>
<html lang="en">
  <head>
      <!-- Files for MathJax -->
      <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
      <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
      
      <!-- Files for driver.js --> 
      <script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
      <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
  </head>

  <body>
      <p>
      When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
      </p>
      <button id="btn">Click to show popover</button>

      <script>
          // Define the popover
          const driver = new Driver();
          driver.defineSteps([
          {
            element: '#btn',
            popover: {
              title: 'Test MathJax',
              description: 'When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]',
              position: 'bottom'
            }
           }
         ]);
           
         let btn = document.querySelector('#btn');
          
         // When button is clicked, popover should appear and MathJax should re-run so that the math in the popover is correctly displayed
         btn.addEventListener('click', function(){
           driver.start();  
           MathJax.Hub.Queue(["Typeset", MathJax.Hub, "driver-popover-item"]);
         });
      </script>
      
  </body>
</html>

这可能是由于 driver.js 的构建方式所致，但我对 JavaScript 的了解不足，无法自行检查 GitHub 回购协议现在似乎很不活跃。

有人有想法吗？

Answer 1

一些观察：

反斜杠 (\) 需要转义，以便它们出现在 javascript 的字符串中。 HTML 标签内不需要那个。

在最新版本中重新运行 MathJax 的命令是 MathJax.typeset()。我延迟了它，以便 driver 有机会让盒子出现。

<!DOCTYPE html>
<html lang="en">
  <head>
      <!-- Files for MathJax -->
      <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
      <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
      
      <!-- Files for driver.js --> 
      <script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
      <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
  </head>

  <body>
      <p>
      When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
      </p>
      <button id="btn">Click to show popover</button>

      <script>
          // Define the popover
          const driver = new Driver();
          driver.defineSteps([
          {
            element: '#btn',
            popover: {
              title: 'Test MathJax',
              description: 'When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]',
              position: 'bottom'
            }
           }
         ]);
           
         let btn = document.querySelector('#btn');
          
         // When button is clicked, popover should appear and MathJax should re-run so that the math in the popover is correctly displayed
         btn.addEventListener('click', function(){
           driver.start();  
           // MathJax.Hub.Typeset(document.querySelector(".driver-popover-description"));
           setTimeout(function() {
            MathJax.typeset();
           }, 1000);
         });
      </script>
      
  </body>
</html>

Answer 2

尽管 Eduardo Poco 的答案适用于单个弹出窗口，但它并未将 MathJax 应用于巡回演出之后的弹出窗口。此外，在执行“Next”和“Prev”时（因此回到应用 MathJax 的第一个弹出窗口），MathJax 不再应用。

要将 MathJax 应用于所有 driver.js 弹出框（我猜其他旅游图书馆也有类似的东西），您可以使用 onHighlighted 将 MathJax 应用于每个突出显示的弹出框。

因此，我的 post 中的示例变为：

<!DOCTYPE html>
<html lang="en">
  <head>
      <!-- Files for MathJax -->
      <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
      <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
      
      <!-- Files for driver.js --> 
      <script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
      <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
  </head>

  <body>
      <p>
      When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
      </p>
      <button id="btn">Click to show popover</button>
      <p id = "test2">Some text</p>

      <script>
          const driver = new Driver({
              onHighlighted: () => {
                 setTimeout(function() {
                    MathJax.typeset();
                   }, 400);
              }
          });
          driver.defineSteps([
          {
            element: '#btn',
            popover: {
              title: 'Test MathJax',
              description: '\(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]',
              position: 'bottom'
            }
           },
            {
            element: '#test2',
            popover: {
              title: 'Test MathJax',
              description: '\(a \ne 0\)',
              position: 'bottom'
            }
           }
         ]);
           
         let btn = document.querySelector('#btn');
         btn.addEventListener('click', function(){
           driver.start(); 
         });
      </script>
      
  </body>
</html>

注意：我将延迟设置为 400 毫秒，因为如果我设置一个较低的值，MathJax 应用得太快（在弹出窗口的内容出现之前），因此内容不会被修改。这个值可能会因您而改变（我多次尝试找到它）。

如何在使用 driver.js 创建的弹出窗口上使用 MathJax？

How can I use MathJax on popovers created with driver.js?

javascript

mathjax