vue-katex

import Vue from 'vue'; import VueKatex from 'vue-katex'; import 'katex/dist/katex.min.css'; Vue.use(VueKatex, { globalOptions: { displayMode: true, // Default to display mode globally throwOnError: false, errorColor: '#FF0000' } }); new Vue({ el: '#app', data: { inlineMath: '\\frac{a_i}{1+x^2}', displayMath: '\\int_0^1 x^2 dx = \\frac{1}{3}', autoRenderContent: 'The quadratic formula is \\(x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\\) and then some display math: $$ E=mc^2 $$' }, template: ` <div id="app"> <h1>Vue KaTeX Example</h1> <h2>Using v-katex directive</h2> <p>Inline: <span v-katex="inlineMath"></span></p> <p>Display mode (local override): <div v-katex:display="displayMath"></div></p> <p>With options: <div v-katex="{ expression: '\\sqrt{2}', options: { throwOnError: false, errorColor: '#00F' } }"></div></p> <h2>Using v-katex:auto directive</h2> <div v-katex:auto> {{ autoRenderContent }} </div> <h2>Using KatexElement component</h2> <katex-element :expression="displayMath" :display-mode="false" /> <katex-element expression="\\sum_{n=1}^\\infty \\frac{1}{n^2} = \\frac{\\pi^2}{6}" :display-mode="true" :throw-on-error="false" error-color="#00A" /> <p>Check the console for any KaTeX errors if throwOnError is false.</p> </div> ` });