文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在使用driver.js创建的弹出窗口上使用MathJax？

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

Stack Overflow用户

提问于 2020-12-24 06:55:06

回答 2查看 151关注 0票数 1

我使用driver.js生成弹出窗口来显示页面。虽然MathJax适用于基本元素，但我不知道如何在弹出窗口上使用它。我跟踪了this answer，并试图在弹出窗口生成时重新运行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代码库目前看起来相当不活跃。

有没有人有主意？

javascript

mathjax

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-27 05:21:27

虽然Eduardo Poco的答案适用于单一的popover，但它不适用于巡演中随后的popover的MathJax。此外，当执行“下一步”和“上一步”时(因此返回到应用MathJax的第一个弹出窗口)，不再应用MathJax。

要将MathJax应用于所有driver.js弹出窗口(我猜其他导览库也有类似的功能)，您可以使用onHighlighted在每个突出显示的弹出窗口上应用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>
      <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>

注意:我将延迟设置为400ms，因为如果我设置一个较低的值，MathJax的应用速度太快(在弹出内容出现之前)，因此内容不会被修改。这个值可能会为您更改(我尝试了几次才找到它)。

票数 0

Stack Overflow用户

发布于 2020-12-26 08:40:49

一些观察结果：

反斜杠()需要进行转义，以便它们出现在javascript中的字符串中。在HTML标记中不需要这样做。

在最新版本中重新运行MathJax的命令是MathJax.typeset()。我推迟了，这样司机就有机会让盒子出现。

<!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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65431917

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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