Update mathjax loading

background/inject.js

@@ -31,6 +31,7 @@ md.inject = ({storage: {state}}) => (id) => {
       state.content.syntax && '/vendor/prism.min.js',
       state.content.emoji && '/content/emoji.js',
       state.content.mermaid && ['/vendor/mermaid.min.js', '/content/mermaid.js'],
+      state.content.mathjax && ['/content/mathjax.js', '/vendor/mathjax/tex-mml-chtml.js'],
       '/content/index.js',
     ].filter(Boolean).flat(),
     injectImmediately: true

content/index.js

@@ -155,12 +155,7 @@ function mount () {
             $('body').classList.add('_toc-left')
           }
           if (state.content.mathjax) {
-            dom.push(m('script', {
-              src: chrome.runtime.getURL('/content/mathjax.js')
-            }))
-            dom.push(m('script', {
-              src: chrome.runtime.getURL('/vendor/mathjax/tex-mml-chtml.js')
-            }))
+            mj.render()
           }
         }
       }

content/mathjax.js

@@ -18,5 +18,27 @@ var MathJax = {
   positionToHash: false,
   options: {
     ignoreHtmlClass: 'tex2jax-ignore'
+  },
+  loader: {
+    paths: {mathjax: chrome.runtime.getURL('/vendor/mathjax/es5')},
+  },
+  startup: {
+    typeset: false
+  }
+}
+
+var mj = {
+  loading: false,
+  render: () => {
+    if (mj.loading) {
+      return
+    }
+    mj.loading = true
+    var timeout = setInterval(() => {
+      if (!!MathJax) {
+        clearInterval(timeout)
+        MathJax.typesetPromise()
+      }
+    }, 0)
   }
 }