Add MathJax extension to a MKDocs served 'website'

[Fabien Lafont]

Hello everyone,

I am very new to this world and I have a little problem. I am using MkDocs to create a wiki for our team and I am using Mathjax to display the latex.

It works well except the bracket notation (Dirac notation in quantum physics)

I saw there is a physics extension that should help me but I have no idea what to do add it.

The only place I see Mathjax called in the Yaml file creating the website is 

extra_javascript:

  - https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0?/MathJax.js?config=TeX-AMS-MML_HTMLorMML

Any idea to help me out?

[Davide Cervone]

The physics extension is part of MathJax vision 3, but you are using version 2.7.0 (a VERY old version, over 6 years old), so you will need to update to version 3 in order to take advantage of the physics extension.

You will also need to either provide a configuration that loads and enables the physics extension, such as

window.MathJax = {

  loader: {load: ['[tex]/physics']},

  tex: {packages: {'[+]': 'physics'}}

}

or would need to include \require{physics} in math mode before the first usage of the physics package notation in your page.  For the configuration approach, you could put that configuration into a separate .js file and add it to your extra_javascript directive in the yaml file.

See if that works for you.

Davide

[Fabien Lafont]

Hello Davide,

Thanks for your email. 

I tried to look for something that looks like the code line I have but with an updated version of Mathjax on cdnjs but I couldn't find it. I am very new to this so I might have missed something. Do you know where I can find it?

Here is my complete Yaml file (I am using mkdocs to do a wiki based on the note taking 'application' Foam)

# official tutorial

# mkdocs-material: https://squidfunk.github.io/mkdocs-material/

# mkdocs: https://www.mkdocs.org/user-guide/configuration/

site_name: Quantum_Circuit_Wiki

theme:

  name: material

  #  favicon: attachment/logo1_1.png

  language: en

  features:

    - navigation.expand

    - tabs

extra_javascript:

  - https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0?/MathJax.js?config=TeX-AMS-MML_HTMLorMML

markdown_extensions:

  - attr_list # https://squidfunk.github.io/mkdocs-material/reference/images/

  - pymdownx.tabbed  # https://squidfunk.github.io/mkdocs-material/reference/content-tabs/

  - nl2br # newline-to-break

  - toc:

      permalink: '#' # heading anchor

      slugify: !!python/name:pymdownx.slugs.uslugify # 解决中文标题解析问题

  - admonition

  - codehilite:

      guess_lang: false

      linenums: false

  - footnotes

  - meta

  - def_list

  - mdx_math

  - pymdownx.arithmatex

  - pymdownx.betterem:

      smart_enable: all

  - pymdownx.caret

  - pymdownx.critic

  - pymdownx.details

  # - pymdownx.emoji:

      # emoji_generator: !!python/name:pymdownx.emoji.to_png

  - pymdownx.inlinehilite

  - pymdownx.magiclink

  - pymdownx.mark

  - pymdownx.smartsymbols

  - pymdownx.superfences

  - pymdownx.tasklist

  - pymdownx.tilde

plugins:

  - search

  - roamlinks

    #- autolinks

  - exclude:

      glob:

        - "*.tmp"

        - "*.pdf"

        - "*.gz"

      regex:

        - '.*\.(tmp|bin|tar)$'

--
You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/c2ewCUpdPT4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/A06D1EDC-DCFE-45D7-9760-09D74744FC4F%40gmail.com.

[Davide Cervone]

Version 3 can be obtained from

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

or

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js

if you are just using LaTeX notation, not MathML.  If you are going to use the configuration that I provided, you may need to put that into a file on your server and add the URL for that file as an additional line in the extra_javascript section.  Otherwise, use \require{physics} in a math expression before using any of its macros.

Davide

You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/CAC9H_chkqrqMeYHVhZnnk%2BiryQtAjv_6AKPkxYac-iKVmjGvgg%40mail.gmail.com.

[Fabien Lafont]

Thanks Davide,

I tried to replace the line 

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0?/MathJax.js?config=TeX-AMS-MML_HTMLorMML

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js?config=TeX-AMS-MML_HTMLorMML

and

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js?config=TeX-AMS-MML_HTMLorMML

but no success.

Since it seems MkDocs uses arithmatex I tried to follow what say say here

https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#arithmatex

I also tried to download locally mathjax like on the answer described here (and on the image attached):

https://stackoverflow.com/questions/27882261/mkdocs-and-mathjax

When the Mathjax folder is created and populated by git there is no Mathjax.js file present but it seems there it is calling it in the extra_javascript section

Thanks a lot for your help!

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/32EBB973-9F4E-4946-B07D-637B83A05CB2%40gmail.com.

[Davide Cervone]

I tried to replace the line 

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0?/MathJax.js?config=TeX-AMS-MML_HTMLorMML

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js?config=TeX-AMS-MML_HTMLorMML

and

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js?config=TeX-AMS-MML_HTMLorMML

Version 3 doesn't use the "?config=..." syntax, so that part should not be included in the URL (note that I didn't include it in my suggestions to you), though it should not hurt.

but no success.

Were there any error messages in the developer console that might be pertinent?

Since it seems MkDocs uses arithmatex I tried to follow what say say here

https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#arithmatex

This looks like it should work, so it may be that you made a mistake in updating your configuration.

Note that your mkdocs.yaml file should include

markdown_extensions:

  - pymdownx.arithmatex:

      generic: true

extra_javascript:

  - javascripts/mathjax.js

  - https://polyfill.io/v3/polyfill.min.js?features=es6

  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

and that you need to create a file docs/javascript/mathjax.js containing

window.MathJax = {

  loader: {load: ['[tex]/physics']},

  tex: {

    packages: {'[+]': 'physics'},

    inlineMath: [["\\(", "\\)"]],

    displayMath: [["\\[", "\\]"]],

    processEscapes: true,

    processEnvironments: true

  },

  options: {

    ignoreHtmlClass: ".*|",

    processHtmlClass: "arithmatex"

  }

};

document$.subscribe(() => {

  MathJax.typesetPromise()

})

on your site.  I have added the loading of the physics package.

If that doesn't work, be sure to check the developer console for errors that might indicate problems in your setup.

I also tried to download locally mathjax like on the answer described here (and on the image attached):

https://stackoverflow.com/questions/27882261/mkdocs-and-mathjax

When the Mathjax folder is created and populated by git there is no Mathjax.js file present but it seems there it is calling it in the extra_javascript section

That solution seems to be for MathJax v2, but the current version in the MathJax GitHub repository lis version 3, so the "git clone" command for MathJax is getting the wrong version.  If you want to try this further, cd to the MathJax directory and use

git checkout legacy-v2

to get the v2 branch and try again.  (Version 3 doesn't have MathJax.js, and instead has combined files like tex-chml.js and tex-svg.js rather than the v2 "?config=..." syntax for indicating the components to be used.)

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/CAC9H_cidL%2B6R6e%3D40bUge729JhK3RnqctOaLBmboRYUEej7%3DOg%40mail.gmail.com.

[Fabien Lafont]

Hello Davide,

Thanks a lot. It works perfectly now: I did what you suggested here:

Note that your mkdocs.yaml file should include

markdown_extensions:

  - pymdownx.arithmatex:

      generic: true

extra_javascript:

  - javascripts/mathjax.js

  - https://polyfill.io/v3/polyfill.min.js?features=es6

  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

and that you need to create a file docs/javascript/mathjax.js containing

window.MathJax = {

  loader: {load: ['[tex]/physics']},

  tex: {

    packages: {'[+]': 'physics'},

    inlineMath: [["\\(", "\\)"]],

    displayMath: [["\\[", "\\]"]],

    processEscapes: true,

    processEnvironments: true

  },

  options: {

    ignoreHtmlClass: ".*|",

    processHtmlClass: "arithmatex"

  }

};

document$.subscribe(() => {

  MathJax.typesetPromise()

})

I guess previously I missed a little something.

Thanks again!

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/AE304640-AF1D-49CE-B555-23C8A2638E42%40gmail.com.

[Davide Cervone]

Glad you got it to work!

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/CAC9H_cgh1MHZ%2BWjzk-dMBi%2B%2BnZEV47trYpmLvS2a6OitOoAS8A%40mail.gmail.com.