├── demo.gif
├── vue.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── App.vue
    └── components
    │   └── test-comp.vue
├── babel.config.js
├── docs
    ├── .vuepress
    │   ├── public
    │   │   └── logo.png
    │   ├── enhanceApp.js
    │   └── config.js
    ├── README.md
    └── guide
    │   └── quick-start.md
├── packages
    ├── index.js
    └── components
    │   └── vue-mathjax.vue
├── .editorconfig
├── .gitignore
├── package.json
└── README.md


/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justforuse/vue-mathjax/HEAD/demo.gif


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   productionSourceMap: false
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justforuse/vue-mathjax/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justforuse/vue-mathjax/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/.vuepress/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justforuse/vue-mathjax/HEAD/docs/.vuepress/public/logo.png


--------------------------------------------------------------------------------
/docs/.vuepress/enhanceApp.js:
--------------------------------------------------------------------------------
1 | import Mathjax from '../../packages'
2 | 
3 | export default ({ Vue, options, router }) => {
4 |   Vue.use(Mathjax)
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | heroImage: /logo.png
4 | heroText: Vue Mathjax
5 | tagline: A Vue plugin for mathjax
6 | actionText: Get Started →
7 | actionLink: /guide/quick-start
8 | ---
9 | 


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | import VueMathjax from "./components/vue-mathjax.vue";
 2 | 
 3 | export { VueMathjax };
 4 | 
 5 | export default {
 6 |   install: function (Vue) {
 7 |     Vue.component("vue-mathjax", VueMathjax);
 8 |   },
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import VueMathjax from './VueMathjax.umd.min.js'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | Vue.use(VueMathjax)
 9 | 
10 | new Vue({
11 |   render: h => h(App),
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: http://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | # Unix-style newlines with a newline ending every file
 7 | [*]
 8 | end_of_line = lf
 9 | insert_final_newline = true
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | indent_style = space
13 | indent_size = 2
14 | 
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | **/dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 
25 | package-lock.json
26 | 


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: 'Vue Mathjax',
 3 |   head: [
 4 |     ['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML' }]
 5 |   ],
 6 |   themeConfig: {
 7 |     logo: '/logo.png',
 8 |     nav: [{ text: 'Guide', link: '/guide/quick-start' }],
 9 |     repo: 'https://github.com/justforuse/vue-mathjax',
10 |     sidebar: [
11 |       {
12 |         title: 'Guide',
13 |         collapsable: false,
14 |         sidebarDepth: 0,
15 |         children: ['/guide/quick-start']
16 |       }
17 |     ]
18 |   },
19 |   plugins: [
20 |     'demo-container'
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img alt="Vue logo" src="./assets/logo.png">
 4 |     <test-comp msg="Welcome to Your Vue.js App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import TestComp from './components/test-comp.vue'
10 | 
11 | export default {
12 |   name: 'App',
13 |   components: {
14 |     TestComp
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: Avenir, Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   margin-top: 60px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/components/test-comp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <textarea v-model="formula" cols="30" rows="10"></textarea>
 4 |     <hr>
 5 |     <h2>Result: </h2>
 6 |     <vue-mathjax
 7 |       :formula="formula"
 8 |       :safe="false"
 9 |       :options="customOptions"
10 |     />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'TestComp',
17 |   data () {
18 |     return {
19 |       formula: '<button>dfgtest</button> $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$',
20 |       msg: 'Welcome to Your Vue.js App',
21 |       customOptions: {
22 |         displayAlign: 'left'
23 |       }
24 |     }
25 |   }
26 | }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/docs/guide/quick-start.md:
--------------------------------------------------------------------------------
 1 | # Quick start
 2 | 
 3 | ## Installation
 4 | 
 5 | ```sh
 6 | npm install --save vue-mathjax
 7 | ```
 8 | 
 9 | 
10 | ## Usage
11 | ### ❗️❗️Don't forget to import the Mathjax.js:
12 | ```js
13 | <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
14 | ```
15 | 
16 | Import globally
17 | ```js
18 | import VueMathjax from 'vue-mathjax'
19 | Vue.use(VueMathjax)
20 | ```
21 | OR
22 | ```js
23 | import {VueMathjax} from 'vue-mathjax'
24 | export default {
25 |   ...
26 |   components: {
27 |     'vue-mathjax': VueMathjax
28 |   },
29 |   ...
30 | }
31 | ```
32 | 
33 | ## Demo
34 | 
35 | :::demo
36 | ```html
37 | <div class="demo-container">
38 |     <textarea v-model="formula" cols="30" rows="10"></textarea>
39 |     <vue-mathjax :formula="formula"></vue-mathjax>
40 | </div>
41 | 
42 | <script>
43 | export default {
44 |   name: 'HelloWorld',
45 |   data () {
46 |     return {
47 |       formula: '$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$'
48 |     }
49 |   }
50 | }
51 | </script>
52 | <style>
53 | .demo-container {
54 |   text-align: center;
55 | }
56 | </style>
57 | ```
58 | :::
59 | 
60 | ## Props
61 | ### formula
62 | `type: string` mathjax string
63 | 
64 | ### safe
65 | `type: boolean; default: true` sometimes you want render the html in your mathjax, so just set it to false. demo: [codesandbox](https://codesandbox.io/s/vue-template-ftd5s)
66 | 
67 | ### options
68 | `type: object; default: {}` custom Mathjax configurations
69 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-mathjax",
 3 |   "version": "0.1.1",
 4 |   "main": "dist/VueMathjax.common.js",
 5 |   "module": "dist/VueMathjax.umd.min.js",
 6 |   "files": [
 7 |     "dist/*.js"
 8 |   ],
 9 |   "scripts": {
10 |     "serve": "vue-cli-service serve",
11 |     "build": "vue-cli-service build",
12 |     "build:lib": "vue-cli-service build --target lib --name VueMathjax packages/index.js",
13 |     "lint": "vue-cli-service lint",
14 |     "docs:dev": "vuepress dev docs",
15 |     "docs:build": "vuepress build docs"
16 |   },
17 |   "dependencies": {
18 |     "core-js": "^3.6.5",
19 |     "vue": "^2.6.11"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git+https://github.com/justforuse/vue-mathjax.git"
24 |   },
25 |   "bugs": {
26 |     "url": "https://github.com/justforuse/vue-mathjax/issues"
27 |   },
28 |   "homepage": "https://github.com/justforuse/vue-mathjax",
29 |   "devDependencies": {
30 |     "@vue/cli-plugin-babel": "~4.5.17",
31 |     "@vue/cli-plugin-eslint": "~4.5.17",
32 |     "@vue/cli-service": "~4.5.17",
33 |     "babel-eslint": "^10.1.0",
34 |     "eslint": "^6.7.2",
35 |     "eslint-plugin-vue": "^6.2.2",
36 |     "vue-template-compiler": "^2.6.11",
37 |     "vuepress": "^1.9.7",
38 |     "vuepress-plugin-demo-container": "^0.2.0"
39 |   },
40 |   "eslintConfig": {
41 |     "root": true,
42 |     "env": {
43 |       "node": true
44 |     },
45 |     "extends": [
46 |       "plugin:vue/essential",
47 |       "eslint:recommended"
48 |     ],
49 |     "parserOptions": {
50 |       "parser": "babel-eslint"
51 |     },
52 |     "rules": {}
53 |   },
54 |   "browserslist": [
55 |     "> 1%",
56 |     "last 2 versions",
57 |     "not dead"
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/packages/components/vue-mathjax.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span ref="mathJaxEl">{{ formula }}</span>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'VueMathjax',
 8 |   props: {
 9 |     formula: {
10 |       type: String,
11 |       default: ''
12 |     },
13 |     safe: {
14 |       type: Boolean,
15 |       default: true,
16 |     },
17 |     options: {
18 |       type: Object,
19 |       default: function () {
20 |         return {};
21 |       },
22 |     },
23 |   },
24 |   watch: {
25 |     formula() {
26 |       this.renderMathJax();
27 |     },
28 |   },
29 |   mounted() {
30 |     this.renderMathJax();
31 |   },
32 |   methods: {
33 |     renderContent() {
34 |       if (this.safe) {
35 |         this.$refs.mathJaxEl.textContent = this.formula;
36 |       } else {
37 |         this.$refs.mathJaxEl.innerHTML = this.formula;
38 |       }
39 |     },
40 | 
41 |     renderMathJax() {
42 |       this.renderContent();
43 |       if (window.MathJax) {
44 |         window.MathJax.Hub.Config({
45 |           tex2jax: {
46 |             inlineMath: [
47 |               ["$", "$"],
48 |               ["(", ")"],
49 |             ],
50 |             displayMath: [
51 |               ["$$", "$$"],
52 |               ["[", "]"],
53 |             ],
54 |             processEscapes: true,
55 |             processEnvironments: true,
56 |           },
57 |           // Center justify equations in code and markdown cells. Elsewhere
58 |           // we use CSS to left justify single line equations in code cells.
59 |           displayAlign: "center",
60 |           "HTML-CSS": {
61 |             styles: { ".MathJax_Display": { margin: 0 } },
62 |             linebreaks: { automatic: true },
63 |           },
64 |           ...this.options
65 |         });
66 |         window.MathJax.Hub.Queue([
67 |           "Typeset",
68 |           window.MathJax.Hub,
69 |           this.$refs.mathJaxEl,
70 |         ]);
71 |       }
72 |     },
73 |   },
74 | };
75 | </script>
76 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-mathjax
 2 | 
 3 | [![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)
 4 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
 5 | 
 6 | A Vue.js Plugin for Mathjax
 7 | 
 8 | ## Before Usage
 9 | 
10 | - This is a plugin for vue2, if you are looking for vue3, maybe you can check [this](https://github.com/justforuse/vue-mathjax-next)
11 | 
12 | - This plugin is not compatible with MathJax@3, you can make a PR if you know how to do it.
13 | 
14 | ## Table of contents
15 | 
16 | - [Installation](#installation)
17 | - [Usage](#usage)
18 | 
19 | # Installation
20 | 
21 | ```
22 | npm install --save vue-mathjax
23 | ```
24 | 
25 | 
26 | # Usage
27 | ## ❗️❗️Don't forget to import the Mathjax.js:
28 | ```
29 | <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
30 | ```
31 | ---
32 | ```
33 | import VueMathjax from 'vue-mathjax'
34 | Vue.use(VueMathjax)
35 | ```
36 | OR
37 | ```
38 | import {VueMathjax} from 'vue-mathjax'
39 | export default {
40 |   ...
41 |   components: {
42 |     'vue-mathjax': VueMathjax
43 |   },
44 |   ...
45 | ```
46 | ```
47 | <template>
48 | <div>
49 | <textarea v-model="formula" cols="30" rows="10"></textarea>
50 |   <vue-mathjax :formula="formula"></vue-mathjax>
51 | </div>
52 | </template>
53 | 
54 | <script>
55 | <!-- You can also define globally -->
56 | import { VueMathjax } from 'vue-mathjax'
57 | export default {
58 |   components: {
59 |     'vue-mathjax': VueMathjax
60 |   },
61 |   name: 'HelloWorld',
62 |   data () {
63 |     return {
64 |       formula: '$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$',
65 |       msg: 'Welcome to Your Vue.js App'
66 |     }
67 |   }
68 | }
69 | </script>
70 | ```
71 | 
72 | # Props
73 | ## formula
74 | `type: string` mathjax string
75 | 
76 | ## safe
77 | `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
78 | 
79 | ## options
80 | `type: object; default: {}` custom configurations
81 | 
82 | ---
83 | # Demo
84 | ![demo.gif](https://github.com/justforuse/vue-mathjax/raw/master/demo.gif)
85 | ---
86 | # Online demo
87 | https://codesandbox.io/s/nrw4w90o6p
88 | ## License
89 | 
90 | [MIT](http://opensource.org/licenses/MIT)
91 | 


--------------------------------------------------------------------------------