Как глобально импортировать KaTeX для моего документа в vue js? - PullRequest
Новая
       2

Как глобально импортировать KaTeX для моего документа в vue js?

1 голос
/ 25 июня 2019

В случае статических htmls, я мог бы просто сделать следующее в теге <head>: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
              <script defer  src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
              <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
              <script>                 
                  document.addEventListener("DOMContentLoaded", function() {
                      renderMathInElement(document.body, {
                          delimiters:[
                              {left: '\\begin{equation}', right: '\\end{equation}', display:true},
                              {left: '$$', right:'$$',display:true},
                              {left:'$', right:'$', display: false},
                              {left:'\\(', right:'\\)', display: false}
                          ]
                      });
                  });

              </script>

, который отображает мою математику в любом месте документа, если я правильно использую $. Я тоже хотел сделать то же самое в приложении VUE.

Я добавил вышеуказанный код в index.html, и он выполнил задание для первого запуска. Но когда я изменяю router-view и возвращаюсь к router, где есть математика, он дает мне только код, а не выводит его.

Что я пробовал?

Одна вещь, которую я понял, это то, что router-link не отображает тег head, поэтому автоматическое отображение не выполняется, когда я переключаю routers. Итак, в хуке mounted я добавил 

renderMathInElement(document.body, {
                          delimiters:[
                              {left: '\\begin{equation}', right: '\\end{equation}', display:true},
                              {left: '$$', right:'$$',display:true},
                              {left:'$', right:'$', display: false},
                              {left:'\\(', right:'\\)', display: false}
                          ]
                      });

Он работает хорошо и отображает математику в этом представлении. Но это дает мне ошибку в терминале 

error: 'renderMathInElement' is not defined (no-undef) at src/views/Home.vue:57:2:
  55 |   },
  56 |  mounted(){
> 57 |  renderMathInElement(document.body, {
     |  ^
  58 |                           delimiters:[
  59 |                               {left: '\\begin{equation}', right: '\\end{equation}', display
:true},
  60 |                               {left: '$$', right:'$$',display:true},


1 error found.

Как мне справиться с этим?

...