Блог

я использую vue-mathjax в своем проекте, и в readme говорится, что использование cdn MathJax отлично работает с версией CDN

мне нужно использовать MathJax (v. 2.7.2) как локальную зависимость для моего проекта, но я не знаю, как импортировать его с правильными конфигурациями

как настроить конфигурацию так же, как в версии cdn?

CDN

 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
 

Локальный импорт после установки с помощью npm

 //main.js
import '../node_modules/mathjax/MathJax?config=TeX-AMS_HTML'
 

ошибка

 Uncaught SyntaxError: Unexpected token '<'
 

репозиторий — https://github.com/qwtfy/mathjax-test

Если вы можете переключиться на новую версию 3, вот шаги, предполагающие, что у вас уже есть vue-mathjax.

1. Установите MathJax из npm: npm install mathjax@3
2. Переместите каталог es5 MathJax в общедоступный каталог: mv node_modules/mathjax/es5/ src/assets/mathjax/
3. Импортируйте конфигурацию компонента, которую вы хотите, например:

 import '../assets/mathjax/es5/tex-chtml.js';
 

Если вы должны придерживаться версии 2.7.x, вам нужно будет сделать следующее. В моем тестировании он был менее стабильным.

1. Установите MathJax 2.7.9 из npm: npm install --save mathjax@2.7.9
2. Переместить MathJax.js (находится по адресу node_modules/mathjax/MathJax.js ) в общедоступный каталог, например assets.
3. Переместить TeX-AMS_HTML.js (находится по адресу node_modules/mathjax/config/TeX-AMS_HTML.js ) к тому же государственному директору.
4. Импортируйте оба файла внутри вашего компонента по порядку:

 import '../assets/MathJax.js'
import '../assets/TeX-AMS_HTML.js';
 

Здесь это работает для меня:

Полный пример компонента из одного файла с использованием v3 и vue-mathjax.

 <template lang='pug'>
  div
    b-container(style='width: 40%')
      b-textarea(v-model='formula' cols='30' rows='10')
      p output
      vue-mathjax(:formula='formula')
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { VueMathjax } from 'vue-mathjax';
import '../assets/mathjax/es5/tex-chtml.js';

@Component({
  components: {
    'vue-mathjax': VueMathjax,
  },
})

export default class HelloWorld extends Vue {
  formula = '$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$';
}
</script>
 

Документацию по этим шагам можно найти здесь и здесь .