Mathjax с помощью Vue.js

Я в тупике, как я могу отобразить Tex уравнения в моем html. У меня есть проект на vue с django в бэкенде в качестве CMS. Я использую Ckeditor в качестве текстового поля, которое загружает уравнение в формате markdown из api.

На моей странице vue я могу отобразить весь текст без проблем, используя v-html, но мои математические уравнения отображаются следующим образом: \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

Я перепробовал множество способов безрезультатно, и в настоящее время я могу заставить тестовое уравнение отображаться, добавив это в index.html

    <script>
     MathJax = {
      tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
    };
    </script>
    <script id="MathJax-script" async 
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">. 
    </script>

и это на моей странице vue:

   <span class='math-tex'>( \(\frac{2}{7},\frac{2}{18}\) )</span>

Однако я не могу заставить его работать со строчной математикой и текстом. Вот мой vue div:

            <template v-if="$store.state.user.isAuthenticated">
              <template v-if="activeLesson">
                  <span v-html="activeLesson.long_description"></span>
            </template>
             </template>

Что странно, так это то, что когда я добавляю тестовое уравнение <span class='math-tex'>( \(\frac{2}{7},\frac{2}{18}\) )</span> в раздел template v-f , оно не отображается? Что я делаю неправильно?

Пожалуйста, остановитесь.

Вернуться на верх