https://github.com/justforuse/vue-mathjax

Vue plugin with Mathjax
https://github.com/justforuse/vue-mathjax

mathjax vue vue-component

Last synced: about 5 hours ago
JSON representation

Vue plugin with Mathjax

• Host: GitHub
• URL: https://github.com/justforuse/vue-mathjax
• Owner: justforuse
• Created: 2018-06-07T12:51:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-07-06T02:20:08.000Z (over 2 years ago)
• Last Synced: 2024-10-14T00:01:43.348Z (about 1 month ago)
• Topics: mathjax, vue, vue-component
• Language: Vue
• Homepage: https://vue-mathjax.vercel.app/
• Size: 150 KB
• Stars: 68
• Watchers: 3
• Forks: 21
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-mathjax

[![npm](https://img.shields.io/npm/v/vue-mathjax.svg) ![npm](https://img.shields.io/npm/dm/vue-mathjax.svg)](https://www.npmjs.com/package/vue-mathjax)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

A Vue.js Plugin for Mathjax

## Before Usage

- This is a plugin for vue2, if you are looking for vue3, maybe you can check [this](https://github.com/justforuse/vue-mathjax-next)

- This plugin is not compatible with MathJax@3, you can make a PR if you know how to do it.

## Table of contents

- [Installation](#installation)

- [Usage](#usage)

# Installation

```

npm install --save vue-mathjax

```

# Usage

## ❗️❗️Don't forget to import the Mathjax.js:

```

```

---

```

import VueMathjax from 'vue-mathjax'

Vue.use(VueMathjax)

```

OR

```

import {VueMathjax} from 'vue-mathjax'

export default {

  ...

  components: {

    'vue-mathjax': VueMathjax

  },

  ...

```

```



  



<!-- You can also define globally -->

import { VueMathjax } from 'vue-mathjax'

export default {

  components: {

    'vue-mathjax': VueMathjax

  },

  name: 'HelloWorld',

  data () {

    return {

      formula: '$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$',

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

```

# Props

## formula

`type: string` mathjax string

## safe

`type: boolean; default: true` sometimes you want render the html in your mathjax, so just set it to false. demo: https://codesandbox.io/s/vue-template-ftd5s

## options

`type: object; default: {}` custom configurations

---

# Demo

![demo.gif](https://github.com/justforuse/vue-mathjax/raw/master/demo.gif)

---

# Online demo

https://codesandbox.io/s/nrw4w90o6p

## License

[MIT](http://opensource.org/licenses/MIT)