vue-katex не отображает математику и отображает большой черный ящик

Question

Я только что попытался использовать модуль vue-katex https://www.npmjs.com/package/vue-katex.

Я создал простой пример, используя Vue-Cli

$ vue init webpack-simple my-project

А потом я добавил vue-katex пакет, добавил несколько строк кода, чтобы поместить некоторые математические материалы KaTeX на страницу и запустил мой dev-сервер. Однако математическая запись не отображается должным образом, и на моей странице отображается большой черный ящик.

Вот соответствующая часть моего package.json:

"dependencies": {
  "vue": "^2.5.11",
  "vue-katex": "^0.1.2"
},
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
],
"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.0",
  "babel-preset-stage-3": "^6.24.1",
  "cross-env": "^5.0.5",
  "css-loader": "^0.28.7",
  "file-loader": "^1.1.4",
  "vue-loader": "^13.0.5",
  "vue-template-compiler": "^2.4.4",
  "webpack": "^3.6.0",
  "webpack-dev-server": "^2.9.1"
}

Вот код моего приложения (я пытался взять код прямо со страницы vue-katex npm выше):

<template>
  <div id="app">
    <div v-katex:display="'\\frac{a_i}{1+x}'"></div>
    <img src="./assets/logo.png">
    ...
  </div>
</template>

<script>
import Vue from 'vue';
import VueKatex from 'vue-katex';

Vue.use(VueKatex);

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

И скриншот с результатом:

Вы можете видеть, что математика не рендерится, и я получаю этот странный большой черный ящик. Я включил проверку средств разработки, чтобы упростить диагностику.

Я старался сделать все максимально простым - если бы кто-нибудь мог сказать мне, что я делаю не так, я был бы очень признателен!

Спасибо заранее,

Answer 1

Один шаг отсутствует в документах Vue-Katex. Если вы зайдете в родительский проект, https://github.com/Khan/KaTeX вы обнаружите, что в своем обзоре они содержат ссылку на внешний файл CSS. Вам нужно будет включить это тоже:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" crossorigin="anonymous">