Событие MathJax перед тем, как латексное выражение набрано - PullRequest
Новая
       5

Событие MathJax перед тем, как латексное выражение набрано

0 голосов
/ 03 декабря 2018

У меня есть образец MathJax на Демо-образец , который работает, как и ожидалось.Все, что он делает, это набирает латексные выражения внутри div с идентификатором mathDiv.

Мне нужно выполнить некоторую пользовательскую логику, когда третье латексное выражение собирается быть набрано, то есть когда ${ x } ^ { 4 } = 81 $ if $ x^4 - 9 =0 $ будет набрано.

Вопрос

Могу ли я выполнить некоторый пользовательский JavaScript непосредственно перед тем, как приведенное выше латексное выражение наберет MathJax, и если да, то как мне это сделать?

Я думал, что может быть какая-то модель событий, связанная с набором текста MathJax, но не смог найти ее в документах.

Тот же пример демонстрационного кода, что и ниже. 

 <h2>Math Test</h2>
 <div id="mathDiv">1. Solve for x $$X^2-1 = 8$$. 
     <br>2. Evaluate the following limit: $$\lim_{x \rightarrow b}{  (x-10)  }$$
     <br>3. Is ${  x  } ^ {  4  } = 81 $ if $ x^4 - 9 =0 $ ?
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script type="text/x-mathjax-config">
   MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<script>
   $(document).ready(function() {
   MathJax.Hub.Queue(["Typeset", MathJax.Hub, "mathDiv"]);
  });

</script>

1 Ответ

0 голосов
/ 06 декабря 2018

Существуют сигналы, когда математика набирается (см. пример ), хотя сигналы для вывода HTML-CSS немного сложнее, чем для других форматов вывода.

НоЕсть другой подход, который может работать лучше для вас.Вы можете зарегистрировать препроцессор, который будет запускаться после того, как препроцессор tex2jax обнаружит математику на странице, и это обернет вашу оболочку вокруг математики в этой точке.Затем, когда математика набрана, она автоматически будет внутри оболочки.

Вот один пример для этого: 

<style>
#math0 {color:red}
#math1 {color:blue}
#math2 {color:green; font-size: 200%}
#math3 {color:purple; font-size: 75%}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
MathJax.Hub.Register.PreProcessor(function (element) {
  //
  // Get the math scripts created by tex2jax
  //
  var math = element.querySelectorAll('script[type^="math/tex"]');
  //
  //  Loop through them in reverse (since this
  //  is a live list)
  //
  for (var i = math.length - 1; i >= 0; i--) {
    //
    //  Get the script and any preview that preceeds it
    //
    var script = math[i];
    var preview = script.previousSibling;
    if (preview && preview.className !== 'MathJax_Preview') preview = null;
    //
    //  Create the wrapper span and give it an id
    //  (If you will be typesetting more than once, 
    //   you will need to keep a global id number
    //   and use that rather than i)
    //
    var span = document.createElement('span');
    span.id = 'math'+i;
    //
    //  Insert the wrapper in place of the script
    //  and append the preview and script to
    //  the wrapper.
    //
    script.parentNode.replaceChild(span,script);
    if (preview) span.append(preview);
    span.append(script);
  }
},50);  // use priority 50 so it follows the standard MathJax preprocessors
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full"></script>

<h2>Math Test</h2>
 <div id="mathDiv">1. Solve for x $$X^2-1 = 8$$. 
     <br>2. Evaluate the following limit: $$\lim_{x \rightarrow b}{  (x-10)  }$$
     <br>3. Is ${  x  } ^ {  4  } = 81 $ if $ x^4 - 9 =0 $ ?
 </div>

Здесь обертки имеют стилистику для добавления цвета и масштабирования третьего и четвертого выражений.

Я надеюсь, что комментарии проясняют, что происходит,Этот препроцессор будет запускаться каждый раз, когда вызывается MathJax.Hub.Typeset(), поэтому вы можете использовать его как обычно.

Обратите внимание, что если математика находится на странице изначально, как и здесь, нет необходимости ставить в очередьTypeset() вызов вручную (поскольку MathJax изначально наберет страницу).Если вы динамически изменяете страницу, вам нужно будет это сделать.

...