npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hsorby/vue3-katex

v0.6.0-rc.7

Published

Vue 3 plugin for KaTeX

Downloads

1,214

Readme

vue-katex

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

NPM version License: MIT Build Status codecov

Installation

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

Getting started

In your script entry point:

import { createApp } from 'vue'
import App from './App.vue'

import VueKatex from 'vue-katex';
import 'katex/dist/katex.min.css';

createApp(App)
  .use(VueKatex, {
    globalOptions: {
    //... Define globally applied KaTeX options here
    }
  });

Now you are all setup to use the plugin.

Usage

There are two ways to use vue-katex, using the KatexElement component or using the v-katex directive.

Options

The options you can set true are:

  • copyTex
  • mathtexScriptType
  • mhchem
  • renderA11yString

For example to make use of mhchem you would set the following:

createApp(App)
  .use(VueKatex, {
    mhchem: true,
    globalOptions: {
    //... Define globally applied KaTeX options here
    }
  });

The other option you can set is the globalOptions option.

Global Options

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.

Using the katex directive

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>

Using the katex directive with auto-render

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

Using the KatexElement component

<katex-element expression="'\\frac{a_i}{1+x}'"/>

Through props KatexElement supports all of the same options that KaTeX supports.

| Props | | :----- | |expression Type: String Required A TeX expression to be displayed.| |display-mode Type: Boolean Default: false If true the math will be rendered in display mode, which will put the math in display style (so \int and \sum are large, for example), and will center the math on the page on its own line. If false the math will be rendered in inline mode.| |throw-on-errorType: Boolean Default: false If true, KaTeX will throw a 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.| | error-color="#CC0000" Type: String Default: #CC0000 A color string given in the format "#XXX" or "#XXXXXX". This option determines the color that unsupported commands and invalid LaTeX are rendered in when throwOnError is set to false.| |macrosType: Object Default: null A collection of custom macros. Each macro is a property with a name like \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.| |color-is-text-colorType: Boolean Default: false If true, \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}).| |max-size="Infinity"Type: Number Default: Infinity All user-specified sizes, e.g. in \rule{500em}{500em}, will be capped to maxSize ems. If set to Infinity (the default), users can make elements and spaces arbitrarily large.| |max-expand="1000"Type: Number Default: 1000 Limit the number of macro expansions to the specified number, to prevent e.g. infinite macro loops. If set to Infinity, the macro expander will try to fully expand as in LaTeX.| |allowed-protocols="[]"Type: String[] Default: ["http", "https", "mailto", "_relative"] Allowed protocols in \href. Use _relative to allow relative urls, and * to allow all protocols.| |strictType: [Boolean, String, Function] Default: "warn" If 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: "unknownSymbol": Use of unknown Unicode symbol, which will likely also lead to warnings about missing character metrics, and layouts may be incorrect (especially in terms of vertical heights)."unicodeTextInMathMode": Use of Unicode text characters in math mode."mathVsTextUnits": Mismatch of math vs. text commands and units/mode."commentAtEnd": Use of % comment without a terminating newline. LaTeX would thereby comment out the end of math mode (e.g. $), causing an error. A second category of errorCodes never throw errors, but their strictness affects the behavior of KaTeX"newLineInDisplayMode": Use of \ or \newline in display mode (outside an array/tabular environment). In strict mode, no line break results, as in LaTeX.

See also: KaTeX Documentation

License

vue-katex is released under the MIT license.