# vue-a11y-katex

> Katex Using Vue.js

Latest version **0.0.10** (published 2018-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-a11y-katex
pnpm add vue-a11y-katex
yarn add vue-a11y-katex
bun add vue-a11y-katex
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2018-11-02 |
| First published | 2018-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 704.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Dang Van Thanh |
| Maintainers | dangvanthanh |

## Links

- npm: https://www.npmjs.com/package/vue-a11y-katex
- Repository: https://github.com/dangvanthanh/vue-a11y-katex
- Homepage: https://github.com/dangvanthanh/vue-a11y-katex#readme
- Issues: https://github.com/dangvanthanh/vue-a11y-katex/issues
- npm.io page: https://npm.io/package/vue-a11y-katex

## Recent versions

- 0.0.10 (latest) — 2018-11-02
- 0.0.9 — 2018-05-18
- 0.0.8 — 2018-03-29
- 0.0.7 — 2018-03-29
- 0.0.6 — 2018-03-29
- 0.0.5 — 2018-03-29
- 0.0.4 — 2018-03-28
- 0.0.3 — 2018-03-28
- 0.0.2 — 2018-03-28
- 0.0.1 — 2018-03-28

## README

# Vue A11Y Katex

> Katex Accessibility Using Vue.js

![](screenshot.png)

## Requirements

```
$ npm install katex --save
```

## Install

```
$ npm install vue-a11y-katex --save
```

## Usage

You can [download Katex](https://github.com/Khan/KaTeX) and host it on your server or use from CDN

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" integrity="sha384-jmxIlussZWB7qCuB+PgKG1uLjjxbVVIayPJwi6cG6Zb4YKq0JIw+OMnkkEC7kYCq" crossorigin="anonymous"></script>
```

### CDN

```html
<script src="https://unpkg.com/vue-a11y-katex"></script>
```

### .vue files

##### Import all components

```javascript
import Vue from 'vue'
import KatexMath from 'vue-a11y-katex'

Vue.use(KatexMath)
```

##### Usage

If you use `element-math` please include below script in html

```html
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script>
```

```vue
<template>
  <div class="app">
    <inline-math :expression="inlinemathExpr" />
    <block-math :expression="blockmathExpr" />
    <element-math :expression="elementmathExpr"/>
  <div>
</template>

<script>
export default {
  data () {
    return {
      inlinemathExpr: 'c = \\pm\\sqrt{a^2 + b^2}',
      blockmathExpr: 'f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi',
      elementmathExpr: `
        <span class="blue">
          Other node $$ \int_2^3 $$
        </span>
        and some <!-- comment --> more text blah. And math with a\
        $$c = \\pm\\sqrt{a^2 + b^2}$$
      `
    }
  }
}
</script>
```

## License

MIT © Dang Van Thanh <dangvanthanh@dangthanh.org>

---
_Source: https://npm.io/package/vue-a11y-katex · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._