Vue 中 MathJax 的使用与渲染的监听 (上)

相关文章推荐

想旅行的凉面 · 格尔木藏格锂业有限公司-柴达木循环经济试验区 ...· 1 年前 ·

谦和的牛排 · 【图】订购832台 ...· 2 年前 ·

好帅的铅笔 · 第210话 - 无敌勇者王 - 包子漫画· 2 年前 ·

没有腹肌的松鼠 · 这几个换脸 GitHub 项目牛牛牛 - 知乎· 2 年前 ·

焦虑的手套 · 星途全新一代追风/PHEV上市 ...· 2 年前 ·

在 MathJax 官网能看到以下的介绍:

A JavaScript display engine for mathematics that works in all browsers.

No more setup for readers. It just works.

在 MathJax 的官方文档 What is MathJax? 中有以下文字:

MathJax is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. ...

MathJax uses web-based fonts (in those browsers that support it) to produce high-quality typesetting that scales and prints at full resolution (unlike mathematics included as images)....

MathJax is modular, so it loads components only when necessary, and can be extended to include new capabilities as needed. MathJax is highly configurable, allowing authors to customize it for the special requirements of their web sites. Finally, MathJax has a rich application programming interface (API) that can be used to make the mathematics on your web pages interactive and dynamic.

要点总结如下:

MathJax 是开源的高质量的数学公式渲染引擎

支持现代浏览器

模块化，按需加载

总文件非常大，只能按需加载

正如 MathJax 官网所说的「 It just works.」一样, 一般使用 mathjax 非常简单:

If you write your own HTML (directly or via a template/theme engine), you can include MathJax by adding this snippet to your page:

<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>
且提供了一个示例:
Here's a pre-populated example on jsbin you can re-use.
即只要在 html 引入 MathJax 种子文件，MathJax 会在 ready 后，会自动去渲染document.body 中的数学公式——MathJax 将该过程称为Startup Typeset。
Vue 中使用
在 Vue 中，组件在mounted/updated生命周期后，才完成组件 html 的渲染。 故可在组件mounted/updated生命周期后调用 MathJax 对组件 html 进行数学公式渲染——MathJax 将这一过程叫做Typeset。
使用代码表示如下:
@Component({})
class SomeComponent extends Vue {
    private callMathJaxTypeset(): void {
        // call window.MathJax to typeset
        const { typesetElement } = this.$refs
        MathJax.Hub.Queue(['Typeset', MathJax.Hub, typesetElement])
    mounted(): void {
        this.callMathJaxTypeset()
    updated(): void {
        this.callMathJaxTypeset()
MathJax 加载
一般来说，MathJax 种子文件不应当放在 html——即不一开始就加载，除非整个 webapp 都用到了 MathJax。
更为理想的状况是 MathJax 种子文件按需加载, 故实现一个加载 MathJax 的函数 loadMathJax():
const CDN_URL =
    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?' +
    'config=TeX-MML-AM_CHTML' +
    '&delayStartupUntil=configured'
let isLoading = false
let isConfigured = false
function waitUntil(callback: () => void, failCallback: () => void): void {
    // TODO
function isLoaded(): boolean {
    if (window.MathJax) {
        if (!isConfigured) {
            isConfigured = true
            window.MathJax.Hub.Config({
                skipStartupTypeset: true,
                messageStyle: 'none',
                tex2jax: {
                    inlineMath: [
                        // for recommend
                        ['$', '$'],
                        // the default config
                        ['\\(', '\\)'],
            window.MathJax.Hub.Configured()
        if (window.MathJax.isReady) {
            return true
    return false
function loadScript(): void {
    if (isLoaded() || isLoading) {
        return
    isLoading = true
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = CDN_URL
    document.getElementsByTagName('head')[0].appendChild(script)
async function loadMathJax(): Promise<typeof MathJax> {
    return new Promise((resolve, reject) => {
        if (window.MathJax) {
            resolve(window.MathJax)
            return
        waitUntil(
            () => {
                resolve(window.MathJax)
            () => {
                reject()
        loadScript()
export { loadMathJax }
在loadMathJax() 的实现中，有以下几点需要注意:
跳过Startup Typeset
MathJax cdn url 中必须加上 &delayStartupUntil=configured
调用window.MathJax.Hub.Config 时, skipStartupTypeset 设置为true
调用 window.MathJax.Hub.Configured()
使用 window.MathJax.isReady 判断 MathJax 是否可用
Vue 组件加载与使用 MathJax
为了在 Vue 组件中按需加载与使用 MathJax，可在组件的created 生命周期中加载 MathJax:
@Component({})
class SomeComponent extends Vue {
    private mathJax: typeof MathJax | null = null
    private needTypeset: boolean = false
    private callMathJaxTypeset(): void {
        const { mathJax } = this
        if (mathJax) {
            const { typesetElement } = this.$refs
            mathJax.Hub.Queue(['Typeset', MathJax.Hub, typesetElement])
        } else {
            this.needTypeset = true
    created(): void {
        const mathJax = await loadMathJax()
        this.mathJax = mathJax
        if (this.needTypeset) {
            this.callMathJaxTypeset()
    mounted(): void {
        this.callMathJaxTypeset()
    updated(): void {
        this.callMathJaxTypeset()
此时，可以在 Vue 组件使用 MathJax 渲染数学公式，满足单页面应用中显示数学公式的应用场景。
最近的产品中有一个需求
待 MathJax 渲染(Typeset)数学公式后，用户使用浏览器的打印功能打印网页。
在此需求中，需要判断所有组件实例的 MathJax Typeset 是否完成。
如何监听所有组件实例中的 MathJax Typeset 是否完成呢？且听下回分解。
网易技术热爱者队伍持续招募队友中！网易有道，与你同道，因为热爱所以选择， 期待志同道合的你加入我们，简历可发送至邮箱：bjfanyudan@corp.netease.com
  分类：
 前端
 
 
   相关推荐
   
      
    MathJax在vue项目中的使用总结
 一、开发背景说明 近期在做题库类项目中需要解析latex格式的数学公式，搜集了一些常用的数学公式库,。因业务需求，需要解析的数学公式复杂，我采用的是MathJax,开发环境是vue2。 名称 kate
  983
 
 
        用户7325754246008
        JavaScript
      
    打印隐藏页眉页脚，隐藏元素
 ```js // 给需要隐藏的元素加上no-print类名 //隐藏页眉页脚js // 给需要隐藏的元素加上no-print类名 //隐藏页眉页脚js // 给需要隐藏的元素加上no-prin ```
  82
 




    
 
        Frank同志68687
        DNodeJS
      
    热敏ZPL打印方案
 1. 通过neodynamic安装在固定电脑调用JS打印
  926
 
 
        chakhsu
        JavaScript
      
    前端整合 MathjaxJS 的配置笔记
 这篇文章是我给 Pinghsu 主题添加数学公式功能的一个小教程，包含我大量的官方文档阅读后的实践，跟着这篇配置教程走，你可以做到给任何一个需要数学公式的站点添加支持。
  1032
 
 
        前端CV老师
        React.js
      
    react在页面中使用打印html
 介绍简单的一个在react中打印html安装用法引入后Print(dom,option);解释例子Keywordsreactreact-printreact-print-htmlprint-html
  362
 
 
        来日没有方长
        JavaScript
      
    react 中打印指定区域内容 
 react ro js 中打印指定区域内的内容 window.print() window.print()方法用于打印当前窗口的内容。 调用 print() 方法会产生一个打印预览弹框，让用户可以设置
  418
 
 
      
    js屏幕截图，将前端显示的html元素进行截取并下载
 屏幕截图（将 html 元素转换成图片进行下载） 场景： 写了一个 div 用来做海报、名片之类的，需要对他进行截取，并下载
  465




    
 
 
        JavaScript
      
    前端js打印去除页眉页脚url地址
 解决方案：
  1587
 
 
        JavaScript
      
    JavaScript学习（二十九）——页面打印
 在对页面进行设计时，为了便于浏览者以更加美观、合理的规格打印页面内容，本文章将对页面打印的一些相关设置进行详细说明。用WebBrowser组件的 WebBrowser组件是IE内置的浏览器控件，无须用户下载。其优点是客户独立完成打印目标文档，减轻服务器负荷;缺点是源文档的分析操作...
  178
 
 
        汪汪队出击
        Vue.js
      
    Vue 中Lodop 实现批量打印
 
  81
 
 
        Vue.js
      
    vue中根据光标位置添加内容块
 我又来总结vue+elelmentUI项目中遇到的问题了，话不多说请看下文。 拼接完之后，点击追加则获取光标的当前位置。 我的表演结束，可能过程中有些许不足，希望大家多多指点。
  2270
 
 
        用户7325754246008
        JavaScript
      
    打印
 main.js 引入打印方法 print.js 页面使用打印方法 main.js 引入打印方法 print.js 页面使用打印方法 main.js 引入打印方法 print.js 页面使用打印方法
  49
 
 
        wqjiao
        React.js
      
    手写 editor web 富文本编辑器
 手写富文本编辑器，需要使用 react 中自带的 Fragment 和 createRef，以及 execCommand 方法，这两个到底有什么作用呢。那么，在演示代码前先了解下 Fragment 、 createRef 及 execCommand 是什么，分别有什么作用？ R…
  1141
 
 
        cv也要开心
      
    window.print() 前端实现网页打印
 window.print() 前端实现网页打印,将 DOM 中的 canvas 转为 image window.print()用于打印当前窗口的内容,默认打印页面 body 里的所有内容 打印样式问题
  188
 
 
    网易技术热爱者