vue中使用MathJax展示数学公式

效果

引入第三方包

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

创建js文件用于配置公式

let isMathjaxConfig = false;//用于标识是否配置
// window.MathJax = MathJax;
const initMathjaxConfig = () => {if (!window.MathJax) {return;}window.MathJax.Hub.Config({showProcessingMessages: false, //关闭js加载过程信息messageStyle: "none", //不显示信息jax: ["input/TeX", "output/HTML-CSS"],tex2jax: {inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签},"HTML-CSS": {availableFonts: ["STIX", "TeX"], //可选字体showMathMenu: false,  //关闭右击菜单显示},});isMathjaxConfig = true; //配置完成，改为true
};
const MathQueue = function (elementId) {if (!window.MathJax) {return;}window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};export default {isMathjaxConfig,initMathjaxConfig,MathQueue,
}

vue组件

<template><div> <div class="mathJaxFont" v-html="formula"></div></div>
</template><script>import MathJax from '../utils/MathJax';export default {data() {return {formula:"$$R_{再生水}=\\sum_{j=1}^{n}(Q_{j再生水}-Q_{j再生水上年})\\times C_{ji当年}\\times10^{-2}$$",};},created() {this.formatMath();},methods: {formatMath() {let that = this;setTimeout(function () {that.$nextTick(function () {if (MathJax.isMathjaxConfig) {//判断是否初始配置，若无则配置。MathJax.initMathjaxConfig();}MathJax.MathQueue("hello");//传入组件id，让组件被MathJax渲染})}, 200);},},mounted() {}}
</script>

<style  scoped lang="less">.mathJaxFont {font-size: 18px;margin: 16px;width: max-content;/deep/ .MJXc-display {text-align: left !important;}}
</style>

vue中使用MathJax展示数学公式相关推荐

安卓Android与H5双向交互MathJax展示数学公式(源码+解析)
安卓Android与H5双向交互MathJax展示数学公式(源码+解析) 博主就今天周五又做了个需求(安卓Android与H5交互),原来上线的功能是服务器配置过来的学习报告(一个H5页面)并提供原始 ...
在vue中使用antV-G2展示基础条形图
介绍在vue中使用antV-G2展示基础条形图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
在vue中使用antV-G2展示半径饼状图
介绍在vue中使用antV-G2展示半径饼状图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
在vue中使用antV-G2展示基础面积图
介绍在vue中使用antV-G2展示基础面积图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
在vue中使用antV-G2展示基础饼状图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
在vue中使用antV-G2展示基础环状图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
在vue中使用antV-G2展示折线图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
在vue中使用antV-G2展示柱状图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
Vue中svga特效展示
Vue中svga特效展示这个url是线上地址,注意需要在vue.config.js里配置代理,不然会报跨域的错误. 附个文档链接↓ Package - svgaplayerweb <templ ...

vue中使用MathJax展示数学公式

效果

引入第三方包

创建js文件用于配置公式

vue组件

vue中使用MathJax展示数学公式相关推荐

最新文章

热门文章