正文
vue项目中数学公式的展示
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在这里有个mathjax的插件，可以将dom中的数学公式展示。
第一步安装mathjax
npm install mathjax
安装完之后，你会在index.html中发现，已经引用了js文件，并且有相关配置
<script type="text/javascript"
src="http://api.xkw.com/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script> <script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/MathML","output/SVG"],
extensions: ["mml2jax.js","MathEvents.js"]
}); </script>
并且在utils中多了一个文件MathJax.js
MathJax文件内容
export default {
MathConfig () {
if (window.MathJax) {
console.log('rendering mathjax')
window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub], () => console.log('done'))
}
}
}
再来说一个npm通用的问题，怎么配置，怎么导入
通过在网上半天查询，终于找到
将MathJax.js的配置文件改为如下
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('app')])
}export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue
}
这里做一个简单说明，Hub.Config中是做一些基本配置，再通过调用Hub.Queue这个方法对dom树进行渲染。
基本配置搞定，然后将文件导入到main.js中
import MathJax from './utils/MathJax'
Vue.prototype.MathJax = MathJax
接下来就可以使用了
watch: {
list: function () {
this.$nextTick(function () {
if (this.MathJax.isMathjaxConfig) { // 判断是否初始配置，若无则配置。
this.MathJax.initMathjaxConfig()
}
this.MathJax.MathQueue()// 传入组件id，让组件被MathJax渲染
})
}
}
监听list是否发生变化，发生变化之后，就在dom渲染完之后，生成试题的正确展示形式
