Выполнить MathJax для пользовательских тегов без разделителей - PullRequest
Новая
       106

Выполнить MathJax для пользовательских тегов без разделителей

0 голосов
/ 29 мая 2020

Я хочу использовать mathjax на нашей странице, и у меня есть настраиваемый тег с формулами <formula>.

Однако он работает только тогда, когда я использую разделители внутри своего настраиваемого тега, можно ли разбогатеть на разделитель?

Когда я устанавливаю inlineMath: [['', '']], все зависает. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
	<script>
	  MathJax = {
		tex: {inlineMath: [['$', '$']]},
		startup: {
		  elements: ['formula'],
		  ready: function () {
			MathJax.startup.defaultReady();
		  }
		}
	  }
	</script>
    <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  </head>
  <body>
    <p>hello world</p>
	<p>this is a <formula>x^2 + y^2 = z^2</formula> formula x^2 + y^2 = z^2</p>
	<p>this is a <formula>$x^2 + y^2 = z^2$</formula> formula x^2 + y^2 = z^2</p>
  </body>
</html>

1 Ответ

1 голос
/ 01 июня 2020

Вы можете сделать что-то похожее на пример , приведенный в документации, который показывает, как обрабатывать старые теги <script> в стиле v2, которые использовались для хранения математических вычислений.

Вот пример: 

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script> 
MathJax = {
  options: {
    renderActions: {
      find: [10, function (doc) {
        for (const node of document.querySelectorAll('formula')) {
          const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], false);
          const text = document.createTextNode('');
          node.parentNode.replaceChild(text, node);
          math.start = {node: text, delim: '', n: 0};
          math.end = {node: text, delim: '', n: 0};
          doc.math.push(math);
        }
      }, '']
    }
  }
};
</script> 
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<p>this is a <formula>x^2 + y^2 = z^2</formula> formula x^2 + y^2 = z^2</p>

Обратите внимание, что это заменяет обычную математическую функцию на ту, которая ищет теги <formula>, поэтому, если вы хотите использовать также исходные разделители, измените find: [10 - findTags: [9, чтобы оригинал не был заменен и запускался после запуска вашего кода.

Обратите внимание, что это не дает вам возможности отличить математику в стиле отображения от встроенной математики (как это делают разделители TeX), поэтому вся математика выполняется в строчном стиле. Вы, конечно, можете изменить код, чтобы иметь два разных тега, или разрешить атрибуту в <formula> определять стиль отображения.

...