How to Enable MathJax Rendering in Sublime Text Markdown Preview

Question

Using Sublime Text 3, I'm writing a Markdown document that includes math. The Markdown Preview package enables real-time rendering of the document in the browser (Chrome). So as I write, the changes are visible. The following is my markdown text.

$a = \sin^{2}(\Delta \phi/2) + \cos(\phi_{1})\cos(\phi_{2})\sin^{2}(\Delta \lambda/2)$
$c = 2 \arcsin(\sqrt{a})$
$d = rc$

MarkdownPreview manual says something like "When enable_mathjax is true", but I cannot figure it out where it is. For completeness, The Sublime console does not display any error message. I'm using Windows 7 and the lastest MathJax fetched from Git. MathJax itself works fine when I displayed some sample test html.

Amoy

Answer 1

Providing MarkdownPreview is installed correctly, one can find option enable_mathjax this way:

Douty

Wow! It worked beautifully. Thanx much. The default setting was un-editable text. So I added it the option to override it in user's setting. Then it worked beautifully. – Amoy

@YoungsupKim I'm really glad it helped! May I just ask you, if this answer really was helpful and solved your problem, to mark it by clicking check mark in the top left area (below downward arrow)? Thanks! – Douty

VividD, Of course! I did. I wish I clicked many times! It was very kind of you making video too! Thanx much – Amoy

@YoungsupKim, nice, but you didnt accept my answer yet stackoverflow.com/help/accepted-answer – Douty

Got it done! I was newbie in using stackoverflow...learning everyday. <>< – Amoy

@sparkandshine You can use procedure from #21319898 – Douty

Answer 2

The MarkDown Preview 2.x branch won't work with the method in @VividD answer.

My User Settings, which enables MathJaX is as following:

{
    "enable_mathjax": true,
    "js": [
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js",
    ],
}

Also, using Package​Resource​Viewer I edited the math_config.js in the js folder of MarkDown Preview to make the Display Math aligned to center:

MathJax.Hub.Config({
  config: ["MMLorHTML.js"],
  extensions: ["tex2jax.js"],
  jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
  tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true
  },
  TeX: {
    extensions: ["AMSmath.js", "AMSsymbols.js"],
    TagSide: "right",
    TagIndent: ".8em",
    MultLineWidth: "85%",
    equationNumbers: {
      autoNumber: "AMS",
    },
    unicode: {
      fonts: "STIXGeneral,'Arial Unicode MS'"
    }
  },
  displayAlign: "center",
  showProcessingMessages: false,
  messageStyle: 'none'
});

Pay attention to displayAlign. At default it is displayAlign: "left".
You can customize MathJaX farther according to MathJaX Options.

Forgather

This worked great, except for some reason I had to provide another mathjax engine in the User Settings: "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" – Chanteuse

Yet another addentum in addition to @VividD's and @Royi's answers (the CloudFlare mathjax worked for me). I also had to modify the user settings file according to this: github.com/facelessuser/MarkdownPreview/issues/12 That is, to user settings I had to add also this: "markdown_extensions": { "pymdownx.arithmatex": { "generic": true } } – Thinskinned

Answer 3

As of now, neither of the above answers is working anymore. I finally found a solution in a Github issue which provides an updated version of the code snippet that needs to be added to the MarkdownPreview user settings:

"js": [
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
        "res://MarkdownPreview/js/math_config.js",
],
"markdown_extensions": {
    "pymdownx.arithmatex": {
        "generic": true
    }
}

Sanitarium

This worked partially for me (MathJax was ok but the TOC was not rendering). I found a wiki entry in the MarkdownPreview repository with the full settings: github.com/facelessuser/MarkdownPreview/wiki/… – Ligan

that worked for me, but now the tables are not working correctly – Isometry

Answer 4

In order to give a more precise answer, open the User Settings of Markdown Preview, now located here :

And add this to the settings :

{
    "enable_mathjax": true,
    "js": [
        "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML",
        "res://MarkdownPreview/js/math_config.js",
    ],
    "markdown_extensions": [
        "markdown.extensions.extra",
        {
            "pymdownx.arithmatex": {
                "generic": true
            }
        },
        {
            "markdown.extensions.toc": {
                "permalink": "\ue157"
            }
        }
        //---- etc.
    ]
}

This allows to keep other extensions active (here Table of Contents), which you can specify in the place of //etc..

Fionafionna

Answer 5

In more recent versions (today is September 2022) the configuration of this Sublime extension has slightly changed.

But first, note that MathJax support works only in plain "markdown" mode, not "GitHub" nor "GitLab".

Extras - Markdown Preview Documentation:

GitHub and GitLab is not supported with MathJax. You will have to come up with a MathJax config that works for it and escape problematic syntax that GitHub may try to convert.

This said, head to the configuration of the extension (in the menu bar look for "Preferences", then "Package Settings", then "MarkDownPreview").

Then add the following json snippet. Note that a new "markdown" json node has been added halfway, which I believe wasn't there in previous releases:

"enable_mathjax": true,
"js": {
        "markdown": [
            "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js"
        ]
    }

Spessartite