vue+MathJax 显示数学公式

1.在线cdn引入

1.1 引入后行内公式显示小括号一定要加“\\ ”,注意斜杠后面有个空格

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">//必须要加空格 否则显示出错MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\ (','\\ )']]}});
</script>

2.写配置文件

2.1. 先创建一个js文件然后将内容写入（我是网上copy的）

let isMathjaxConfig = false;//用于标识是否配置
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
}

3.封装mathJax组件（方便在各个页面使用）

3.1 先引入上一步配置文件

3.2 我写的功能需要满足试卷解析，所以一个页面有许多道题，id肯定是动态的网上的都是写死的只有一个id值，解析公式和id值由父组件传入即可。

<template><div><div :id="id" v-html="rawHtml"></div></div>
</template><script>import MathJax from "../api/globalVariable";export default {name: "FormulaAnalysis",props: {value: {},id: null},data() {return {rawHtml: null,answer: '',};},methods: {formatMath() {let that = this;that.$nextTick(function () {if (MathJax.isMathjaxConfig) {//判断是否初始配置，若无则配置。MathJax.initMathjaxConfig();}MathJax.MathQueue(this.id);//传入组件id，让组件被MathJax渲染})}},mounted() {let that = this;that.rawHtml = that.value;},created() {this.formatMath();}}
</script><style scoped></style>

4.页面调用

vue+MathJax 显示数学公式相关推荐

iOS--3分钟教会你用mathjax显示数学公式
iOS–3分钟教会你用mathjax显示数学公式最近开发数学教程,需要显示数学公式和图形,找了很多资料,找到2种方法,1.服务器返回Latex的字符串我在客户端用webView来展示与交互,但是有 ...
前端通过MathJax显示数学公式（vue+MathJax）
文章目录一.关于MathJax 二.应用场景三.遇到的问题问题1(没有渲染效果) 问题2(行间公式不被渲染) 四.未来的方向一.关于MathJax 官方网址:MathJax使用文档简介:Ma ...
在vue中渲染数学公式 - MathJax
在vue中渲染数学公式 - MathJax 1.开发背景目前在使用vue+elementui做一个考试管理系统,在做学生考试页面时需要用到数学公式,但是后台解析出来后不是图片,而且如果是图片的话放在 ...
wordpress 显示数学公式 (MathJax-LaTeX)
blog 不放一堆数学公式怎么能显得高大上,所以 MathJax-LaTeX 也是必装的插件之一了. 一.安装 MathJax-LaTex 插件直接在 wordpress 插件中,搜索并安装 Mat ...
安卓Android与H5双向交互MathJax展示数学公式(源码+解析)
安卓Android与H5双向交互MathJax展示数学公式(源码+解析) 博主就今天周五又做了个需求(安卓Android与H5交互),原来上线的功能是服务器配置过来的学习报告(一个H5页面)并提供原始 ...
android 显示数学函数,MathView,在Android应用中，显示数学公式的库,下载MathView的源码_GitHub_开发99...
MathView MathView 是第三方视图库,它可以帮助你更轻松地在Android应用程序上显示数学公式. 两个渲染引擎可用:MathJax 和 KaTeX. 支持Android版本 4.1 ( ...
在网页中显示数学公式
网上在网页中显示数学公式的办法有很多,在实验了很多方法后我还是选择两种最简单粗暴的方法. 1.截图 2.ASCIIMathML 比起MathML,ASCIIMathML简单了很多,不需要再 ...
vue操作,显示数据
vue操作,显示数据 1.操作页面上的数据组件中的内容 <template><div class="about"><h1>这是课程页面< ...
Vue + MathLive 实现数学公式可编辑
Vue + MathLive 实现数学公式可编辑效果图一.环境 webpack cli4.0 html2canvas 插件二.配置在index.html 下引用 mathlive js &l ...

vue+MathJax 显示数学公式

1.在线cdn引入

2.写配置文件

3.封装mathJax组件（方便在各个页面使用）

4.页面调用

vue+MathJax 显示数学公式相关推荐

最新文章

热门文章

vue+MathJax 显示数学公式

1.在线cdn引入

2.写配置文件

3.封装mathJax组件 （方便在各个页面使用）

4.页面调用

vue+MathJax 显示数学公式相关推荐

最新文章

热门文章

3.封装mathJax组件（方便在各个页面使用）