vue-mathjax
v0.1.1
Published
[![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/)
Downloads
2,977
Readme
vue-mathjax
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
This plugin is not compatible with MathJax@3, you can make a PR if you know how to do it.
Table of contents
Installation
npm install --save vue-mathjax
Usage
❗️❗️Don't forget to import the Mathjax.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
import VueMathjax from 'vue-mathjax'
Vue.use(VueMathjax)
OR
import {VueMathjax} from 'vue-mathjax'
export default {
...
components: {
'vue-mathjax': VueMathjax
},
...
<template>
<div>
<textarea v-model="formula" cols="30" rows="10"></textarea>
<vue-mathjax :formula="formula"></vue-mathjax>
</div>
</template>
<script>
<!-- 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'
}
}
}
</script>
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