vue-katex nicht rendern mathe und große schwarze box anzeigen

Question

Ich habe gerade versucht, das vue-katex-modul https://www.npmjs.com/package/vue-katex zu verwenden.

Ich habe ein einfaches Beispiel mit vue-cli

$ vue init webpack-simple my-project 

und dann habe ich die vue-katex Paket hinzugefügt, um die wenigen Zeilen Code einige Katex mathematische Sachen auf der Seite zu setzen und meine Dev-Server gestartet. Die mathematische Notation wird jedoch nicht richtig angezeigt, und auf meiner Seite wird eine große schwarze Box angezeigt.

Hier ist der relevante Teil meines 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" 
} 

Hier ist mein App-Code (Ich habe versucht, den Code direkt aus der vue-Katex npm Seite oben zu nehmen):

<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> 

Und ein Screenshot des Ergebnisses:

Sie können sehen, dass die Mathematik nicht rendert und ich bekomme diese komische große schwarze Box. Ich habe die Überprüfung der Entwicklungswerkzeuge eingeschlossen, um die Diagnose zu erleichtern.

Ich habe versucht, alles so einfach wie möglich zu halten - wenn jemand mir sagen könnte, was ich falsch mache, würde ich es wirklich schätzen!

Vielen Dank im Voraus,

Answer 1

Ein Schritt aus dem vue-Katex docs fehlt. Wenn Sie zum übergeordneten Projekt https://github.com/Khan/KaTeX gehen, werden Sie feststellen, dass sie einen Link zu einer externen CSS-Datei enthalten. Sie finden diese auch enthalten müssen:

<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">