justforuse / vue-mathjax Goto Github PK

View Code? Open in Web Editor NEW

65.0 3.0 21.0 154 KB

Vue plugin with Mathjax

Home Page: https://vue-mathjax.vercel.app/

JavaScript 13.15% Vue 68.18% HTML 18.67%

mathjax vue vue-component

vue-mathjax's Introduction

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.

Installation
Usage

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)

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

License

MIT

vue-mathjax's People

Stargazers

Watchers

vue-mathjax's Issues

How to config customize；just like MathJax.Hub.Config({...})

as title : How to config customize；just like MathJax.Hub.Config({...})

Add the function call to mounted too

I use nuxt.js and without calling the render function on mounted when the component is ready, it only shows the plain code without rendering.

Solution: I added the mounted hook to the component and so the formular renders on initial page load.

mounted: function () {
   this.renderMathJax()
}

how to import [email protected] in vue as local dependency?

im using vue-mathJax in my project and in the readme it says to use cdn of mathJax
works fine with the CDN version

im need to use mathJax(v. 2.7.2) as local as dependency for my project but dont know how to import it with the correct configurations

how do yout set the configuration same as with the cdn version?

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>

Local import after installing with npm

//main.js
import '../node_modules/mathjax/MathJax?config=TeX-AMS_HTML'

error

Uncaught SyntaxError: Unexpected token '<'

HTML5 | MathML <mrow> Tag

Can I use HTML5 | MathML Tag with vue-mathjax package ?

as in this example:
data () {
return {
formula: <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <mrow mathsize="18px"> <mi>f</mi><mfenced><mi>x</mi></mfenced> <mo>=</mo><msup><mi>x</mi><mn>2</mn></msup> </mrow> </math>,
msg: 'Welcome to Your Vue.js App'
}
}

I have tired it but it only display it as string

AsciiMath

Does this support AsciiMath Rendering? I am importing a version of MathJax that supports Ascii Math, but it will not display when I use backticks surrounding my ascii math equations. Also if I try just a Latex equation and right click for the context menu then I only see MathML and Laxtex/Tex and no ascii math option

how to use in nuxt js?

i want to use this module in my nuxt js app. but it does not work. need help.

HTML tags rendered as string in DOM

const text = "<p>What is the value of $\sqrt{3x-1}+(1+x)^2$?</p>";

I passed text as formula in the vue-mathjax component and passed false value to safe prop. It is rendering the DOM correctly.

But when I look into the page source, it shows that HTML is rendered as string in DOM.

I want it to be rendered as HTML. How can I fix this?

Can be used in Vue3?

Is this package compatible with Vue3? Have trouble with this for a long time. Thank you!

How to set enableMenu to false?

How to disable the popup menu when right clicking on the equation?
The probe passing the prop :options="{enableMenu: false}"
I already tried to modify the vue-mathjax.vue file in the src folder but nothing
Please help

note: Not compatible with MathJax@3

It seems vue-mathjax is Not compatible with MathJax@3.

Suggest add a note about compatibility.

Use single $ will not be format?

As the title. Formula use $$ can be format as math style. But use $ can not be format. $ is formatted inline as some doc say, but official demo use $$ only. Is $ not support ?

Sorry, I‘m confused. I think vue-mathjax was same as mathjax and I missed

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

in document of mathJax.
Maybe vue-mathjax support tex2jax or inlineMath settings?

how to export the formula to an image

does the vue mathjax provide a method to covert the formula to an image (svg, base64 etc)?
if yes, how to use ?
any API document to check ?

@justforuse I am trying to use vue-mathjax in my nuxt project. I have tried evrything and copied and pasted the code from the codesandbox but I am still getting plain text. May you help?

Example code isn't working

I've tried to include the vue-mathjax npm package to my project, but the math formula is just dublicated without being rendered as expected – and as seen in the animation.

I added the code of the usage part of your README to the following sandbox:
https://codesandbox.io/s/ll919qy8mq

Do I miss something to get the code running properly?

Using vue-mathjax without npm

Is it possible to include vue-mathjax via a <script>-tag, and then add it to Vue as a component?

demos do not work

I tried online demo https://codesandbox.io/s/vue-template-ftd5s.
It DO NOT work.

Library not working with the latest MathJax implementation

Importing MathJax with the recommended method does not render formulas:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Whereas it works with this one:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>

Unclear where to put <src> pointer to MathJax

The README.md says:

Don't forget to include <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>.

It is not clear where I should put this. In a simple web page, that would be clear, but Vue changes the structure significantly. I have tried to put it in vue components where it is being used, or in the index.js page, or in the App.vue page, without any luck.

The only way I can get this to work, ever, is on the Codepen page, because it has an area where I can include external dependencies.

An example on the readme would be hugely helpful.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): pin dependencies (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-service, babel-eslint, eslint, eslint-plugin-vue, vue-template-compiler, vuepress, vuepress-plugin-demo-container)
chore(deps): update dependency mathjax to v2.7.9
chore(deps): update dependency eslint to v8
chore(deps): update dependency eslint-plugin-vue to v9
chore(deps): update vue monorepo (major) (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-service, vue)
Click on this checkbox to rebase all open PRs at once

Detected dependencies

html

public/index.html

mathjax 2.7.2

npm

package.json

core-js ^3.6.5

vue ^2.6.11

@vue/cli-plugin-babel ~4.5.17

@vue/cli-plugin-eslint ~4.5.17

@vue/cli-service ~4.5.17

babel-eslint ^10.1.0

eslint ^6.7.2

eslint-plugin-vue ^6.2.2

vue-template-compiler ^2.6.11

vuepress ^1.9.7

vuepress-plugin-demo-container ^0.2.0

Check this box to trigger a request for Renovate to run again on this repository

How to set inline?

如何设置不换行呢？

How to set inline?

Cannot align display equation using &= method

Cannot align display equations via the &= Method. All display equations are centered, meaning as you showing working via display equations the equation moves towards the middle of the page. If you add the &= it causes the MathJax not to work. Thanks heaps for making vue-mathjax!

How do I prevent MathJax from showing raw TeX while waiting for rendering to complete?

#Stackoverflow: Question https://stackoverflow.com/questions/29722813/how-do-i-prevent-mathjax-from-showing-raw-tex-while-waiting-for-rendering-to-com

Not clear about What can we pass in options prop?

typescript support

Could you add typescript type definitions for this plugin?

Rendering string inside ()

When I write something inside (), it is considered as math equation. I want to skip rendering something that is inside (). Any way to do so?

v-html issues

So I have questions that could potentially contain tex-formatted formulae and html. using the <vue-mathjax :formula="currentQuestion.q"></vue-mathjax> syntax, I can only get one benefit at a time - HTML rendering or mathjax rendering. How do I get both?