KaTeX enables fast math typesetting for the web. vue-katex is a lightweight plugin introduces a simple way to use KaTeX in your Vue app. Enjoy! π
Install vue-katex with katex as a peer dependency
# With NPM
npm i vue-katex katex -P
# With Yarn
yarn add vue-katex katex
As explained in the KaTeX documentation, you must also add the related stylesheet.
<style>
@import "../node_modules/katex/dist/katex.min.css";
</style>or
import 'katex/dist/katex.min.css';In your script entry point:
import Vue from 'vue';
import VueKatex from 'vue-katex';
import 'katex/dist/katex.min.css';
Vue.use(VueKatex, {
globalOptions: {
//... Define globally applied KaTeX options here
}
});Now you are all setup to use the plugin.
There are two ways to use vue-katex, using the KatexElement component or using the v-katex directive.
Options applied globally through the plugin will be merged with any options applied locally to the v-katex directive or KatexElement. Locally applied options have a higher precedence and will override globally applied options, the exception to this is any KaTeX option of the type object or array. These will be merged with the resultant option containing all global and local keys or elements.
In your template (don't forget to escape all backslashes):
<div v-katex="'\\frac{a_i}{1+x}'"></div>To render the math in display mode:
<div v-katex:display="'\\frac{a_i}{1+x}'"></div>To add KaTeX options, use an object literal instead:
<div v-katex="{ expression: '\\frac{a_i}{1+x}', options: { throwOnError: false }}"></div><div v-katex:auto>
\(\frac{a_i}{1+x}\)
</div>Options can be applied as follows
<div v-katex:auto="{ options }">
\(\frac{a_i}{1+x}\)
</div>See KaTeX documentation for auto-render for more information.
<katex-element expression="'\\frac{a_i}{1+x}'"/>Through props KatexElement supports all of the same options that KaTeX supports.
| Props |
|---|
Type: ParseError when it encounters an unsupported command or invalid LaTeX. If false, KaTeX will render unsupported commands as text, and render invalid LaTeX as its source code with hover text giving the error, in the color given by errorColor. |
Type: \name (written "\\name" in JavaScript) which maps to a string that describes the expansion of the macro, or a function that accepts an instance of MacroExpander as first argument and returns the expansion as a string. MacroExpander is an internal API and subject to non-backwards compatible changes. See src/macros.js for its usage. Single-character keys can also be included in which case the character will be redefined as the given macro (similar to TeX active characters). This object will be modified if the LaTeX code defines its own macros via \gdef, which enables consecutive calls to KaTeX to share state. |
Type: \color will work like LaTeX's \textcolor, and take two arguments (e.g., \color{blue}{hello}), which restores the old behavior of KaTeX (pre-0.8.0). If false, \color will work like LaTeX's \color, and take one argument (e.g., \color{blue}hello). In both cases, \textcolor works as in LaTeX (e.g., \textcolor{blue}{hello}). |
Type: false or "ignore", allow features that make writing LaTeX convenient but are not actually supported by (Xe)LaTeX (similar to MathJax). If true or "error" (LaTeX faithfulness mode), throw an error for any such transgressions. If "warn" (the default), warn about such behavior via console.warn. Provide a custom function handler(errorCode, errorMsg, token) to customize behavior depending on the type of transgression (summarized by the string code errorCode and detailed in errorMsg); this function can also return "ignore", "error", or "warn" to use a built-in behavior. A list of such features and their errorCode:
|
See also: KaTeX Documentation
vue-katex is released under the MIT license.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent