MathJax does not work straight away with instant loading

[wegank]

• I've read the contribution guidelines and agree with them

I've found a bug and checked that ...

• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

As the title suggests.

Expected behavior

When instant loading is enabled, MathJax is expected to typeset the content on page changes.

Actual behavior

Formulas won't be rendered unless MathJax.typesetPromise() is manually called or the page is refreshed.

Steps to reproduce the bug

1. Follow the guide on creating a new site, enabling instant loading, and enabling MathJax.
2. Create a new page and write random formulas.
3. Preview and click on the new page to see if formulas are rendered.

Package versions

• Python: 3.9.2
• MkDocs: 1.1.2
• Material: 7.1.0

Project configuration

site_name: My Docs

theme:
  name: material
  features:
    - navigation.instant

markdown_extensions:
  - pymdownx.arithmatex:
      generic: true

extra_javascript:
  - javascripts/config.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

System information

• OS: macOS 11.2.3, Ubuntu 20.04
• Browser: Chrome 89.0.4389.114

[c4ssiopei4]

I can confirm this bug.

[squidfunk]

Thanks for reporting. We might need to adjust the configuration (after window.MathJax and add:

document$.subscribe(() => {
  MathJax.typesetPromise()
})

This should trigger after the new document content was injected.

[c4ssiopei4]

This works!

Thanks a lot

[squidfunk]

Reopening, so we don't forget to add something to the docs.

[squidfunk]

Added in 7761cad.

[petemounce]

I have tried to enable MathJax via the documentation, and it has not worked.

• mkdocs 1.3.1
• mkdocs-material 8.4.1
• (also when I tried to upgrade to 1.4.2 and 9.0.2 respectively)

I get an error:

reportUnhandledError.ts:21 Uncaught TypeError: MathJax.typesetPromise is not a function
    at Object.next (mathjax.js:15:13)
    at e.next (Subscriber.ts:161:25)
    at t._next (Subscriber.ts:119:22)
    at t.next (Subscriber.ts:75:12)
    at Subject.ts:68:20
    at ot (errorContext.ts:29:5)
    at t.next (Subject.ts:61:5)
    at t.next (ReplaySubject.ts:65:15)
    at Object.next (index.ts:44:32)
    at e.next (Subscriber.ts:161:25)

My mkdocs.yml:

---
site_name: docs
docs_dir: handbook
theme:
  name: material
  language: en
  features:
    - content.tabs.link
    # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/
    - navigation.indexes
    - navigation.instant
    - navigation.tabs.sticky
    - navigation.top
    - navigation.tracking
    # https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-search/
    - search.highlight
    - search.share
    - search.suggest
    # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#table-of-contents
    - toc.follow
  icon:
    repo: fontawesome/brands/github
markdown_extensions:
  # Python Markdown; https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#supported-extensions
  - abbr
  # needed for emoji (https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/#configuration)
  - attr_list
  - admonition
  - def_list
  # todo: explore reference, https://squidfunk.github.io/mkdocs-material/reference/#built-in-meta-plugin
  # - meta
  - toc:
      permalink: true
  # Python Markdown Extensions; https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#supported-extensions
  - pymdownx.arithmatex:
      generic: true
  - pymdownx.details
  # TODO: Figure out what Python dependencies are needed to use emoji.
  # needed for emoji (https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/#configuration)
  # - pymdownx.emoji:
  #     emoji_index: !!python/name:materialx.emoji.twemoji
  #     emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.highlight:
      anchor_linenums: true
      auto_title: true
      linenums: true
  - pymdownx.inlinehilite
  - pymdownx.snippets:
      auto_append:
        - infra/docs/abbreviations.md
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tasklist:
      custom_checkbox: true
  # Strike-through text with tildes: https://squidfunk.github.io/mkdocs-material/reference/formatting/#highlighting-text
  - pymdownx.tilde
plugins:
  - awesome-pages:
      strict: true
  - search:
      lang: en
  - tags:
      tags_file: generated/tags.md

extra:
  analytics:
    # https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-analytics/#google-analytics
    provider: google
    property: G-something
    feedback:
      title: Was this page helpful?
      ratings:
        - icon: material/emoticon-happy-outline
          name: This page was helpful
          data: 1
          note: >-
            Thanks for your feedback!
        - icon: material/emoticon-sad-outline
          name: This page could be improved
          data: 0
          note: >-
            Thanks for your feedback!

extra_javascript:
  - docs/javascripts/mathjax.js

[c4ssiopei4]

Try this: extra_javascript: - javascripts/mathjax.js - https://polyfill.io/v3/polyfill.min.js?features=es6 - ***@***.***/es5/tex-mml-chtml.js (Docs is not necessary in javascripts/mathjax.js)

…

Am 04.01.2023 um 18:06 schrieb Peter Mounce - notifications at github.com ***@***.***>: I have tried to enable MathJax via the documentation, and it has not worked. - mkdocs 1.3.1 - mkdocs-material 8.4.1 - (also when I tried to upgrade to 1.4.2 and 9.0.2 respectively) I get an error: reportUnhandledError.ts:21 Uncaught TypeError: MathJax.typesetPromise is not a function at Object.next (mathjax.js:15:13) at e.next (Subscriber.ts:161:25) at t._next (Subscriber.ts:119:22) at t.next (Subscriber.ts:75:12) at Subject.ts:68:20 at ot (errorContext.ts:29:5) at t.next (Subject.ts:61:5) at t.next (ReplaySubject.ts:65:15) at Object.next (index.ts:44:32) at e.next (Subscriber.ts:161:25) My mkdocs.yml: --- site_name : docs docs_dir : handbook theme : name : material language : en features : - content.tabs.link # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/ - navigation.indexes - navigation.instant - navigation.tabs.sticky - navigation.top - navigation.tracking # https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-search/ - search.highlight - search.share - search.suggest # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#table-of-contents - toc.follow icon : repo : fontawesome/brands/github markdown_extensions : # Python Markdown; https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#supported-extensions - abbr # needed for emoji (https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/#configuration) - attr_list - admonition - def_list # todo: explore reference, https://squidfunk.github.io/mkdocs-material/reference/#built-in-meta-plugin # - meta - toc : permalink : true # Python Markdown Extensions; https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#supported-extensions - pymdownx.arithmatex : generic : true - pymdownx.details # TODO: Figure out what Python dependencies are needed to use emoji. # needed for emoji (https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/#configuration) # - pymdownx.emoji: # emoji_index: !!python/name:materialx.emoji.twemoji # emoji_generator: !!python/name:materialx.emoji.to_svg - pymdownx.highlight : anchor_linenums : true auto_title : true linenums : true - pymdownx.inlinehilite - pymdownx.snippets : auto_append : - infra/docs/abbreviations.md - pymdownx.superfences : custom_fences : - name : mermaid class : mermaid format : !!python/name:pymdownx.superfences.fence_code_format - pymdownx.tabbed : alternate_style : true - pymdownx.tasklist : custom_checkbox : true # Strike-through text with tildes: https://squidfunk.github.io/mkdocs-material/reference/formatting/#highlighting-text - pymdownx.tilde plugins : - awesome-pages : strict : true - search : lang : en - tags : tags_file : generated/tags.md extra : analytics : # https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-analytics/#google-analytics provider : google property : G-something feedback : title : Was this page helpful? ratings : - icon : material/emoticon-happy-outline name : This page was helpful data : 1 note : >- Thanks for your feedback! - icon : material/emoticon-sad-outline name : This page could be improved data : 0 note : >- Thanks for your feedback! extra_javascript : - docs/javascripts/mathjax.js — Reply to this email directly, [view it on GitHub](#2530 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AFQ6TEMVXSS2ULR74SAVZTDWQWUZPANCNFSM42RKJXQQ). You are receiving this because you commented.Message ID: ***@***.***>

[c4ssiopei4]

Hm.. Github replaced some strings with *** in the last entry

You find it also in the docs:
https://squidfunk.github.io/mkdocs-material/reference/mathjax/?h=math#mkdocsyml

[petemounce]

Found it - I'd missed the 2 & 3 extra-js somehow when pasting from the docs. Thanks.

(docs/ was necessary for me inside the extra_javascripts array element; explicitly,docs/javascripts/mathjax.js)