У меня есть формула LaTeX (для репликации которой я использую MathJax), которая отлично работает в HTML, но когда я пытаюсь внедрить ее через .innerHTML
, это не удается.
В обычном HTML я получаю следующее:
Но когда я использую этот код в JS:
document.getElementById("si_suvat_equation").innerHTML =
"<span>\begin{gather} s = ut + \frac{1}{2} at^{2}\\ \notag end{gather}</span>";
Тогда я получаю это:
Итак, как мне сделать так, чтобы мой введенный HTML выглядел как исходный HTML? Я предполагаю, что JS читает что-то, как будто это код, а не просто вводит его в сыром виде. Но я не уверен, как это изменить, поэтому он вводит только необработанный код.
Что нужно сделать:
В строковом литерале JavaScript обратная косая черта имеет особое значение. Есть несколько способов обойти это, но поскольку в синтаксисе LaTeX обратная косая черта очень распространена, вероятно, лучше всего использовать String.raw
, чтобы обратная косая черта воспринималась как буквальная обратная косая черта.
У вас отсутствует обратная косая черта перед end{gather}
Математика должна быть окружена разделителем, который по умолчанию $$
.
В MathJax есть функция верстка, с помощью которой вы можете позволить движку MathJax снова обработать веб-страницу, чтобы набрать вновь добавленный контент. Пожалуйста, обратите внимание на ссылочную документацию, так как вместо этого вам может понадобиться использовать typesetPromise
.
Вот демонстрация, где статический контент загружается правильно, а место, где должна появиться динамическая формула, инициализируется с помощью кнопки. Когда вы щелкаете по нему, выполняется динамический код, а затем вызывается div
. Как видите, этот динамический контент теперь также корректно набран:
document.querySelector("button").addEventListener("click", () => {
document.getElementById("si_suvat_equation").innerHTML =
String.raw`<span>$$\begin{gather} s = ut + \frac{1}{2} at^{2}\\ \notag \end{gather}$$</span>`;
MathJax.typeset();
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js"></script>
<div>$$\begin{gather} s = ut + \frac{1}{2} at^{2}\\ \notag \end{gather}$$ </div>
<div id = "si_suvat_equation"><button>Load</button></div>
Этот фрагмент показывает сообщение в «консоли», связанное с изолированной средой этого фрагмента стека. Он не будет отображаться в более стандартной среде.