Как вы динамически вставляете MathJax (Latex) через JavaScript?

У меня есть формула 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 читает что-то, как будто это код, а не просто вводит его в сыром виде. Но я не уверен, как это изменить, поэтому он вводит только необработанный код.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
66
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Что нужно сделать:

  • В строковом литерале 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>

Этот фрагмент показывает сообщение в «консоли», связанное с изолированной средой этого фрагмента стека. Он не будет отображаться в более стандартной среде.

Другие вопросы по теме