vue3 typescript,vue配置mathjax3

 2023-12-25 阅读 37 评论 0

摘要:1.index.html?引?mathjax HTML <script src="https://node2d-public.hep.com.cn/mathjax@3/es5/tex-mml-chtml.js" id="Ma thJax-script"></script> 2.新建globalVariable.js?件,寫?操作mathjax的配置和渲染函數 let isMathj
1.index.html?引?mathjax
HTML
<script src="https://node2d-public.hep.com.cn/mathjax@3/es5/tex-mml-chtml.js" id="Ma thJax-script"></script>
2.新建globalVariable.js?件,寫?操作mathjax的配置和渲染函數
let isMathjaxConfig = false // ?于標識是否配置
const initMathjaxConfig = () => {if (!window.MathJax) {return}window.MathJax = {tex: {inlineMath: [['$', '$'],['\\(', '\\)']], // ?內公式選擇符displayMath: [['$$', '$$'],['\\[', '\\]']] // 段內公式選擇符},options: {skipHtmlTags: ['script', 'noscript','style', 'textarea', 'pre', 'code','a'], // 避開某些標簽ignoreHtmlClass: 'tex2jax_ignore',processHtmlClass: 'tex2jax_process'}}isMathjaxConfig = true // 配置完成,改為true
}
const TypeSet = async function (elementId) {if (!window.MathJax) {return}window.MathJax.startup.promise = window.MathJax.startup.promise.then(() => {return window.MathJax.typesetPromise()}).catch((err) => console.log('Typeset failed: ' + err.message))return window.MathJax.startup.promise
}
export default {isMathjaxConfig,initMathjaxConfig,TypeSet
}

其中typeset函數?Mathjax.typesetPromise()是異步調?。如果是?同步調?排版函數
MathJax.typeset(),可能會出現某些擴展(?如/boldsymbol)?法加載的問題。
參考:
排版與數學轉換 — MathJax 3.2 文檔 (osgeo.cn)https://www.osgeo.cn/mathjax/web/typeset.html#typeset-asynchttps://github.com/siyuan-note/siyuan/issues/152https://github.com/siyuan-note/siyuan/issues/152
3.在main.js??引?globalVariable.js
import globalVariable from './util/globalVariable.js' 
Vue.prototype.globalVariable = globalVariable 
4.在需要渲染數學公式的vue??的mounted后期和updated周期,調?渲染?法
mounted() {window.addEventListener('scroll', this.handleScroll)if (this.globalVariable.isMathjaxConfig) {// 判斷是否初始配置,若?則配置。this.globalVariable.initMathjaxConfig()}this.globalVariable.TypeSet()},updated() {if (this.globalVariable.isMathjaxConfig) {// 判斷是否初始配置,若?則配置。this.globalVariable.initMathjaxConfig()}this.globalVariable.TypeSet()},

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://808629.com/196835.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 86后生记录生活 Inc. 保留所有权利。

底部版权信息