https://github.com/justforuse/vue-mathjax
Vue plugin with Mathjax
https://github.com/justforuse/vue-mathjax
mathjax vue vue-component
Last synced: 6 months 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 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-06T02:20:08.000Z (over 3 years ago)
- Last Synced: 2024-10-14T00:01:43.348Z (over 1 year 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
- awesome-vue - vue-mathjax - A Vue.js Plugin for Mathjax (Components & Libraries / UI Components)
README
# vue-mathjax
[ ](https://www.npmjs.com/package/vue-mathjax)
[](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
---
# Online demo
https://codesandbox.io/s/nrw4w90o6p
## License
[MIT](http://opensource.org/licenses/MIT)